designer

Thoughts about design

Adobe Fireworks Resources

Recently I did a search of resources for someone new to Adobe Fireworks. This is the list I came up with, and please feel free to comment and I’ll add to it. Should end up a pretty great list.
I did videos for Total Training on Fireworks CS5, but everybody here already knows that. Just do a search. I think most are on youtube at this point. Greg Rewis also did a slew of them on tv.adobe.

In CS6, make sure you have Auto Save turned on here >>http://www.stuffandnonsense.co.uk/blog/about/turn_on_fireworks_cs6_auto_save

Make sure you have all the good extensions from:
John Dunning – johndunning.com/fireworks/
Matt Stow – http://mattstow.com/
Aaron Beal – http://fireworks.abeall.com/extensions/
http://fwextensions.com/
http://fireworks.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/

Resources:
http://www.webportio.com/
http://www.extendingfireworks.com/
http://www.noupe.com/design/an-explosion-of-adobe-fireworks-resources.html
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fireworkswireframingkit.com/
http://johndunning.com/fireworks/about/QuickFire
http://192.150.16.64/devnet/fireworks/articles/atv_fw_interaction_design.html
http://webdesign.tutsplus.com/tutorials/applications/whats-new-in-fireworks-cs6/ (and they have a ton of videos by Tom Green and Jim Babbage)
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html
helpx.adobe.com/pdf/fireworks_reference.pdf
http://bootstrapfireworks.com/#!prettyPhoto
http://www.fireworkstoolkits.com/
http://mattstow.com/export-responsive-prototype.html
http://www.fireworkszone.com/
http://launch.fwpolice.com/
http://www.smashingapps.com/2011/09/14/40-extremely-useful-adobe-fireworks-tutorials-for-designers.html
http://fireworks.smashingmagazine.com/
http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
http://www.splashnology.com/article/adobe-fireworks-useful-articles-and-tutorials/2489/

http://layersmagazine.com/ – Tom Green has a ton of Tutorials here, and I believe Jim Babbage has stuff here also.

Oh… and one of the few Fireworks User Groups, Fire on the Bay. Tons of recordings http://www.meetup.com/Fire-On-The-Bay/

From my previous posts about extensions:

http://www.vcarrer.com/2010/09/fireworks-mini-web-wireframing-kit.html
http://www.dragnet.se/webbdesign/websitewireframes.html
http://buchok.com/blog/?p=56
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/ (this entire post is great and *filled* with wireframing extras)
http://www.fireworkszone.com/fireworks_annotation_command
http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/

http://fireworks.abeall.com

Extensions
http://johndunning.com/fireworks/
http://speckyboy.com/category/fireworks-extensions/
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fwextensions.com/
http://orangecommands.com/

That should be enough to get you going for awhile. 🙂

360|Flex and MO Adobe Camp aftermath

Attending 2 conferences in 1 week is plenty, let alone speaking at both, and on different topics. Phew.

At 360|Flex I spoke on Logical Design for Developers – Design isn’t a 4 letter word, and At the Adobe Camp in Columbia MO, it was on Flash Catalyst. I have my slides up online of course, but also had some links I wanted to share with people who attended the sessions.

Flash Catalyst: http://portal.sliderocket.com/AKEGI/RealWorld_FC

and the Design for Developers one is here: http://portal.sliderocket.com/AKEGI/Logical-Design-for-developers

So below are some random notes I took while creating the slides, and the slides themselves are here —

Why design? Something that isn’t logical -at – all; empathy. Designers try and put themselves in the shoes of the user. Trying to understand how they think, how they navigate a site or an application for instance, thus the UX designer. Which is why we’ll be talking about the logistics of design, the rules, but this is an important fact we need to keep in mind.

Avoid graphical applications, except ones you are already familiar with. On twitter I see tons of devs curse Photoshop. I almost never hear them talking about Fireworks however. I know more devs who use that than anything else, which is why we’ll be using it for the majority of what we do today. If you can design with code, do so. There is nothing wrong without that, just remember some of the rules we’ll talk about here.

Play it safe. Follow the logic of design, make it usable

5 major areas
Typography
Color
Imagery
grids
whitespace

Design is just a process with rules, patterns and conventions

Acronyms – UI – UX
UI is what the user sees and controls,
UX is what the user feels (wait times, steps in a process, shifts in attention

It is important to understand the audience, who will consume the data. What do they expect?

If you aren’t sure which to pick, maybe white. grey and a color, or black and a color.

Great icons are a must – tons out there. bitbox, dryicons.com etc.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…
•    Avoid animation.
•    Choose images with a strong foreground element.
•    Compress your imagery but not too much!
•    Use faces, people are naturally drawn to them.
•    Avoid clipart illustrations

eyedropper for color — keep colors minimal — an all grey web page/ application can be interesting if a splash of color is thrown in.

http://960.gs/

We know when something is attractive, it is the Why we don’t always understand

Google vs Yahoo or MSN

Create an inspiration folder, just like you probably do for devs you admire

Rules for what not to do, and what to do — line height! Let your users read your text.
If we were talking we, I’d tell you 1.4 – 2.0 ems depending on your text hight of course.

Rules of thumb. column width – 2 alphabets wide

2 – 3 TOPS for type faces on a page/application/site

San serif looks better on the web for any body copy, Georgia works great as a header

http://www.otokomusic.com/web/main.html — why people hate flash sites. Good looking enough, but a very short loop guitar lick and just repeats. Obviously they want you to turn it off. I get the idea, I am at a music site. The grunge type for the navigate  just doesn’t make sense. Neither does all the tape, and the fact it is a notebook, which makes me believe it was a bought Flash site.

Type faces:

Legibility
Generous spacing
Readability
Aesthetics
Mood
Personal Choice (You just like it)
Plan your hierarchy
What have others done? http://fontsinuse.com/
Avoid Anachronisms
Avoid trite correlations
•    Don’t use Papyrus just because your topic is “ancient” in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all)
•    Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all)
•    Don’t use Lithos just because your topic is about Greek restaurants.
•    Don’t use Futura just because your topic deals with “the future”.
Stick with the classics

Golden Ratio
Fibonacci number
A Fibonacci spiral created by drawing arcs connecting the opposite corners of squares in the Fibonacci tiling; this one uses squares of sizes 1, 1, 2, 3, 5, 8, 13, 21, and 34; see Golden spiral

The ratio of 3:5 (or 5:3) is special to professional designers. This ratio is known as the Golden Proportion

http://goldenratiocalculator.com/

http://mobile-patterns.com/

http://www.paul-rand.com/

More links

http://webdesignledger.com/resources/8-cheat-sheet-wallpapers-for-designers-and-developers

http://www.artofthetitle.com/2011/03/14/a-brief-history-of-title-design/

http://blog.echoenduring.com/2011/03/16/usability-and-css3-columns/

Geeky design sites
http://www.logodesignlove.com/
http://www.designmeltdown.com
http://www.mobileawesomeness.com
http://patterntap.com
http://quince.infragistics.com
http://www.designupdate.com

http://www.paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/
http://webdesignledger.com/tips/getting-started-in-ios-user-interface-designhttp://www.underconsideration.com/brandnew/

http://speckyboy.com/2010/10/27/30-fresh-web-ui-mobile-ui-and-wireframe-kits/

http://www.emazekraker.biz/projects/webWireframeKit/

designingfortheweb.co.uk/book/index.php
Color theory is a lot like math – harmony, complementary (blue and orange), monochromatic, tetrad,
Additive, subtractive primaries, split complementary
colorlovers.com
kuler.adobe.com

Hope that helps someone.

Dee

Update for why Fireworks is better than Photoshop

Designers being designers have used Photoshop forever. It is sad to see that they also seem to use it for web design. Right tool for the right job I say. So, if you use Photoshop for web, or even Ilustrator, listen up.

Since I wrote the last post about PS vs FW, I’ve seen a few other posts and none of them go into specifics. So, here is a list. There is 1 thing people forget the easiest though when comparing, which is why they can’t fully be compared. Photoshop is pixel based, while Fireworks is vector. Fireworks can also manipulate bitmaps, but Photoshop only uses the term vector to certain objects while working in Photoshop. Once exported, they are no longer vector, which is HUGE. Anywho, here you go.

Things they do similar:

  • They both have a similar layout, thanks to Owl panels in CS4.
  • They both have styles (layer styles in Photoshop)
  • They both have layers and layer groups
  • Some similar tools (clone stamp, tragic wand…)
  • Export jpg, gifs, png (8, 24, 32), psd, tiff, flat png, swf, etc
  • Same type engine – hmmm (personal note, would love more control over text)
  • They can both put text on a path
  • They both can mask, select bitmaps, clone, pen tool, paint (though not anywhere near the same)

Now these are similar remember not exactly alike, but many of the tools are called the same thing. For instance they both can have layer effects. Fireworks calls it Photoshop Live Effects, but has the same options. Photoshop has Adjustment layers, but both can use levels, curves, hue and saturation and others.

So some major differences are:

  • Animated .gifs
  • Gradients – they both have them, but Fireworks 
does it better
  • They both integrate well with Dreamweaver and Flash, 
except vector shapes in Photoshop end up being 
bitmaps still when brought into Flash.
  • Text – They supposedly have the same font engine, but there is room for
improvement in Fireworks
  • Export slices

They both have animated .gifs, but do it very differently. Gradients goes to Fireworks because it is on a vector object, plus you see the start and stop points and it’s super easy to manipulate. Again the difference between when something is vector or not goes to Fireworks. If I am going to Flash, which is a vector program btw, why would I use something pixel based unless I am manipulating an image? I wouldn’t. But technically, Photoshop can go to Flash. I can open a PSD in Flash and make a symbol. The big difference here is Fireworks can make symbols. It’s more similar to Illustrator at this level than Photoshop. Exporting. I won’t go into some rant here. Photshop simply doesn’t have the same control over exporting as Fireworks does. Plus it makes a smaller file if optimizing. Thanks to fellow Fireworks geeks like Matt Stow and David Hogue, we have enhanced Exports that actually export nice CSS. At least to the point where it makes it easy to manipulate and I have a nice starting point. OK, onward we go.

  • Filters – you can bring in Photoshop filters inside Fireworks
  • They both export PDF’s, except Fireworks can make interactive ones, but Photoshop has more typical PDF options. Unfortunately, Fireworks does not embed fonts.
  • They both can make an *almost* instant web gallery (just a minute or 2 depending on how many images)
  • Define is a slice as an image or html (Fireworks can do a background image, PS can’t)
  • They both export CSS, but PS and AI use Absolute positioning
  • They both have align features,  
but FW can align to the stage/canvas but PS can auto-align layers.
  • They can both do a slideshow, although Photoshop
does one via a PDF presentation, and FW can do one
 of all document pages and ends up a swf.

So what does Photoshop do better?

  • Image Manipulation
  • Defining and selection areas of a bitmap using a variety of means, such as… Alpha channels, Quick Select tool, Quick Mask mode
  • Rubber stamp, yes they both have one, but there is NO contest as to which one is better and can do more.
  • Healing brush and similar tools
  • Brushes (so many to choose from)
  • Defining your own brush and/or pattern
  • Color management and CMYK, which FW does not do
  • Zoomify
  • Actions (Fireworks can be scripted, but this is just something I’ve done for so long that it’s a presonal thing. I can make an action and a droplet to do most repetitive tasks  in Photoshop so fast and I couldn’t make a script that fast.)
  • Batch commands and droplets
  • Even through Photoshop is a bitmap program, you can open/place something as a smart object. Allows for resizing bitmaps, and can update an Illustrator document later and the ability to make an image a Smart Object so it can be re-sized without degradation to the image. (smaller back to normal size, not bigger)
  • Content-aware scaling (amazing feature)
  • 3D
  • video manipulation
  • vanishing point

So what can Fireworks do?

  • Vector…everything
  • Pages and Master pages
  • Shared Layers between Pages
  • Application development (like AIR)
  • User Interfaces
  • Common Library of commonly used items like HTML, Flex components, and custom symbols I can make myself
  • Making symbols like for Flash – Drag and Drop from FW to Flash (try that with PS. FW retains them as vector)
  • Exporting MXML and other options
  • Interactive alignments like Flash
  • Rollovers and States
  • The ability to make wireframes and then make
them working html or an interactive PDF
 (with hotspots liked to Pages) and get client approval on layout before time
is wasted on a design
  • Background slices, foreground etc.
  • 9-slice scaling
  • CSS Export – Matt Stow’s better CSS Export
  • Pathfinder (Illustrator’s Pathfinder, but on crack)
  • Auto shapes including some 3D
  • Special Characters panel (but will it be there next version?)
  • Commands unique to web
  • A preview of rollovers etc. without having to open a Save for Web window
  • Send to email
  • Vector shapes, real vector shapes
  • Ability to easily make a hotspot, new button, etc
  • Via property inspector, manipulate a variety of fills types, patterns, stroke options and more
  • Someone is making a new
plug-in every day

Quite a list, huh? I have seen the most amazing logos, drawings, etc. come from Fireworks. People use it in the most amazing ways daily. I have been using Photoshop since version 1. I’ve been certified in it for years and years. I’ve taught it for over 12 now. But I use the right tool for the right job, and for me, anything, anything at all for the web, I use Fireworks. I can make a site 10 times faster in Fireworks than Photoshop any day of the week.

But, like other web geeks, I am not always the designer as well. Often I am given a PSD file. What then? Not a problem. In CS4 they make that process much less painful. I can not only bring in a Photoshop file, but I can export back out of Fireworks as one as well if needed.  Sometimes, some things don’t always come across exactly the same. Masks sometimes need to be re-linked, but all in all, it works pretty well. All layers are 100% opacity so that would also need to be changed. Fonts can have different spacing at times as well. All-in-all though, it can be pretty seamless.

Once you dig in, find how useful Pages can be, do a wireframe or 2 you’ll be just as hooked as the rest of us who consider themselves to be Fireworks Evangelists.A shout to guru Jim Babbage (http://www.communitymx.com/author.cfm?cid=1036) Who is the nicest guy, and knows his stuff in Fireworks.

Here are some helpful links, though not remotely a complete list.

Web Design: Photoshop vs Fireworks – no contest

There have been many a showdown lately about whether fireworks or Photoshop is the better tool for the web. I hate to say this, but Fireworks is the better tool to go to the web. (Let me say I am a Photoshop ACE (Adobe Certified Expert) and Certified Instructor, and have been using it since version 2.0, but it’s a matter of the right tool for the right job) I love Photoshop, I do, but hands-down Fireworks is better for many things like:

– It slices better than Photoshop hands down.
– It has Pages, which let you carry on your design to other pages with a Master page for all common elements.
– With Pages, it allows for you to start with a wireframe and have the client approve of the basic structure before you move on to full blown design. It’s called rapid prototyping.
– From that wireframe or design you can make your navigation work and post it to a site, or make a PDF to send to the client.
– It exports much better CSS without having to slice everything up, as we use background images now, and Fireworks understand that and lets you choose when something is a background image.
– It’s a vector-based drawing program, and since most people use Photoshop, you can make your page more unique, plus making vector shapes is much easier.
– Makes symbols to go into Flash if necessary. (Yes you can bring in a Photoshop file into Flash, but it’ll still be a bitmap, not vector art, thus a bigger file)
– Makes skinning application super easy, like for Flex since it also exports as MXML.

(Flash Catalyst (formally Thermo and to come in 2009) will allow the designer to design a web application in Photoshop, Illustrator or Fireworks and bring it into Catalyst and make scroll bars and buttons, and other things function, then hand that off to the developer to let Flex finish things off.)

Photoshop has many positives, and it is by far the standard for image manipulation. I will say for simple image manipulation, i.e., color correction fireworks does a fine job. I can do most things to my images right inside of Fireworks that I need.

The problem as I see it, is Fireworks was just added to the Creative Suite in 3.3 of the Design Premium. Designers haven’t had years to play with it, except for us old groupies of the Macromedia Studio collection. I won a copy of Ultra Dev (Dreamweaver) and Fireworks 3 years ago, 2000 I think. Many current designers just don’t bother learning something new. They already have Photoshop and why learn a new tool. Didn’t Photoshop take what ImageReady had and they incorporated that into it? Well the answer is yes, to a degree.

Can I slice in Photoshop and name it and even make it text? Yes
Can I export as html, and some CSS and have my images go into a folder? Yes
Can I easily make an animated GIF? Yes
Can I make rollover images easily? Whoa, ah, well, ummm, no. This is where the buck stops to a degree. If I want to make a rollover image in PS, I’d have to rename the slice and re-export it.

So, can I save time in Fireworks? Yes. Could I convince others to join me there and save time and frustration? Maybe. For every designer who has CS4, I’d say come on in, open up Fireworks and see how it can change your life by freeing up time spent making Photoshop mockups.

Clipping Masks in Photoshop

A student of mine recently asked for this, so I thought I’d just throw it out there just in case anyone else was having trouble with it. As usual there are a multitude of ways to do this. I just happen to like the way of least resistance. Of course, this technique works with any shape, including text.

  1. Open the file you want to be a rounded rectangle instead of a square image. .
  2. Choose the rounded rectangle Shape tool. You need to make sure you put in the radius of the rectangle you want before you use it. Say 15.
  3. Go ahead and draw your rectangle to the size you want inside your image. (It will make a layer so if the size isn’t right, go to Edit and Free Transform to change the size.)
  4. Make sure you have the image layer chosen. You may need to double click it and give it a new name. Anything besides our locked-down default Background will do because nothing can go underneath a locked down layer.
  5. Take the Shape layer and drag it under the image layer.
  6. Hold down your Option/Alt key and click once you see the overlapping circle symbol when your cursor is between the 2 layers. Then you should see the an arrow in the layers panel, and your shape in the image only when looking at the image.

This is a Clipping Mask. A clipping mask is always great because it is non-destructive to the image. It also means you can apply any Layer Effect to the shape, and both the image and the shape is moveable. A non linked mask.