General 27 Sep 2005 11:38 am
Feedback: What design tools do you use?
We’d like to know what design tools you use on a regular basis. Please let us know which tools you use and how you use them. We’d also like to hear more about workflows between designers and developers. Do you mockup you content in Photoshop, vectorize in Illustrator, and then import to Flash? Do you do everything in Freehand and then hand off to a developer using Flash, Flex or an opensource dev tool? Please offer your feedback on your designer workflow.
on 27 Sep 2005 at 12:15 pm 1.tony of the weeg clan said …
i mockup in photoshop.
if i need to vectorize, i do illustrator.
then flash it.
dont really like freehand. and havent figured
out why fireworks is better than photoshop, and
since ive been photoshopping since 4, its hard to
move off it, as the tools are soo like the back of my hand, that if i moved off it would add hours to projects, not minutes.
on 27 Sep 2005 at 12:22 pm 2.Aaron said …
I typically do my mock-ups in Illustrator (very rarely with Photoshop post work). I then prepare that for Flash by removing all gradients and exporting to a SWF. Then all that’s needed in Flash is re-adding gradients and grouping as proper Movie Clips before coding.
I started out in Illustrator so it’s really the tool I’m most comfortable with, and allows great transportability to flash.
on 27 Sep 2005 at 12:35 pm 3.john ivanoff said …
denim http://dub.washington.edu/denim/ it’s free and you can mock up an interactive website. it’s really slick i’ve been using it for over a year.
on 27 Sep 2005 at 12:36 pm 4.JesterXL said …
Designer gives me a PSD. I ask him to render the text layers and flatten the effect layers.
I open the PSD in Fireworks, and clean up the PSD (remove layers that don’t apply, trim alphas, organize layers). I then typically export each layer as it’s own PNG and trim their alpha. Some PNG’s I keep layered to ensure the layout integrity.
I import the PNG’s into Flash (flattened if single, layered if needed). From there on out, it’s updating of PNG’s via the library.
Illustrator, same process.
Somewhat the same process for Flex, although, without a library, I usually just put assets into a SWF and embed in classes, or put in an images folder.
If the source design is a FLA, I usually just re-build the FLA to ensure things are done right (no point for graphics to be movieclips for example) and work with components. If the FLA design is going to Flex, same as above.
on 27 Sep 2005 at 12:36 pm 5.jersu said …
1) We use photoshop to do nearly all layout work. Then we export every layer as a PNG with transparency to bring into Flash.
2) PNGs then get their own named movieclip, exported for actionscript
3) Developer uses Eclipse to code, Flash IDE to compile.
on 27 Sep 2005 at 12:45 pm 6.Al Lemieux said …
Illustrator, because it rocks! Don’t get me wrong, I love Photoshop, but you can’t create objects as quickly and with the variety and control that you have in Illustrator. It’s my starting point. Actually, some paper and a pen is, but then on to Illustrator.
on 27 Sep 2005 at 12:47 pm 7.MaTT said …
well I could go on a bit here, anyhow workflow depends largly on thhe project, obviously if its vector based its AI usually, tho bringing complex vectors in from AI into flash, you lose a lot, like gradient mesh etc, well, it all goes to png and doesnt look quiet right, on the Photoshop side, I do pretty massive production work, and have been chatting to the folks over at Adobe about this for awhile, there are a lot of things that could be cleaned up nicley after the merger that could save a fair amount of time.
Anyway so basically on the PS side, use of things like smart objects, slice sets, and layer comps help keep the PSD level stuff intact, any changes atlater stages in the project, just whip back to where you need to be and save out and update in flash.
I pretty much handle my own workflow as I am the lead developer + I also handle the builds 100% so I know what I want. So this includes my after effects workflow and i use watched folders where possible for queues to squeeze the flvs.
Whats really important, is having the designer and developer in good communicado about the asset managment side of things, stick wih an obvious dir structure, one that follows your sitemap, so its easy enough to find the relative site assets, same with your code, work in packages that follow the same structure here.
anyways, thats about the half of it.
MaTT
on 27 Sep 2005 at 1:29 pm 8.Jay said …
Depending UI begins in PS or AI.
Create JPGs when coming from PS.
Import into Flash begin building the main interface and developing the elements that can be Flash.
Then move into FireWroks and create PNGs, JPGs, or GIFs depending on the need. Finish building in Flash. If PS had a better PNG like fireworks and it’s optimization was better I would drop Fireworks.
I have only (relucantly) given up FreeHand. I love it but nobody else here does. I love the PAGES.
AI goes straight into Flash and then anything that needs further tweaking is in Flash.
on 27 Sep 2005 at 1:55 pm 9.Paul Neave said …
My experience tends to be:
Designer designs a layout in Photoshop.
Coder takes design and makes it come “alive” in Flash.
Designer & Coder take turns in passing an ever-growing FLA file between each other, making tweaks and amends in shifts.
A way to circumvent this shuttling-a-massive-Flash-file-around fun would be a great help! I guess Flex would be the way forward but at the moment it’s not targeted at the more creative end of the market, more for large RIAs.
And due to the buggy importing from Illustrator to Flash, vector work very rarely tends to be developed in Illustrator, rather directly into Flash or mocked up in Photoshop.
on 27 Sep 2005 at 2:13 pm 10.Chris Charlton said …
When I work on other people’s files, I usually get a PSD or AI, which I’m happy my Fireworks opens.
When I work internally I use PNG (FW), have used FreeHand for somethings but FW has been my all-in-one killer app. I don’t slice block elements, since I remake them in CSS anyway.
As for Flash, if the app is dynamic then I usually use the Drawing API, but if it’s graphical I import from FW. But now with Flash 8, I think I’ll be importing less graphical aesthetics.
on 27 Sep 2005 at 4:43 pm 11.Nathan Derksen said …
I typically either get a PSD mockup, or create a PSD mockup myself. I will paste in a flattened version of the PSD into a background guide layer, then will create a vector version either with the Flash drawing tools , or will use that as a template for drawing the UI with AS. I occasionally draw in Illustrator for more complex stuff, then import to Flash.
For coding, I have migrated to SE|PY, although I previously used an Eclipse plugin whose name escapes me at the moment (Not FDT, but that looks not too shabby). Eclipse provides good CVS tools, so sometimes I use that just for the CVS capabilities.
on 27 Sep 2005 at 5:49 pm 12.Woody said …
>> We’d also like to hear more about workflows between designers and developers.
I love the workflow of what Sparkle/XAML/Avalon offers. Please copy it. “Declarative UI’s” are the way to go.
on 28 Sep 2005 at 8:33 am 13.Roger said …
@Woody: MM did “copy” it, actually XAML, Flex, Laszlo and Boxely were probably all in development at the same time. http://www.macromedia.com/software/flex/
Our workflow is: Shared network drives, Designer owns PSDs, Developers own FLAs. I export a lot of PNGs, I have a photoshop action to trim, expand a few pixels (for the bitmap bug) and export as PNG. Then I realign them using the flattened PSD as a guide. When I’m doing it quick-and-dirty I use PSD2FLA, though it exports a really messy library. If flash 9 played with Photoshop nicely, “layers” could be linked so that a change to one layer would change the appropriate symbols in the linked FLA… though there would have to be good communication between designer and developer on how to structure the “symbols”… the symbols groupings might consist of multiple layers in the PSD but be visible in the photoshop interface, possibly with checkboxes to indicate what should be rasterized/flattened before export and what should not. Just imagining a dream world here
on 28 Sep 2005 at 9:41 am 14.Tim Brady said …
We brain storm the project on paper or white board
Then we Information Architect using Visio
Then the designer creates mocks in Photoshop
When the design is approved the flat art is cut up for place-holder while the design goes into production
The production art is created in Photoshop or Illustrator and imported into Flash
The production artists creates all the art in a seperate FLA and passes it to the developer
The developer in the meantime creates an interactive proto-type using the place-holder art
The developer grabs the assets from the production FLA and incorporates it into the prototype
The master files are then saved to a shared server and both artist and developer have access to it for changes
If there are many people on the project version control software (CVS) is used to maintain it. If not, the version control is done with communication and naming change conventions
Many of the transition elements get incorporated toward the end and are usually created as seperate MCs for easier integration. (unfortunately this causes asset duplication if incorporated too late)
on 28 Sep 2005 at 4:56 pm 15.Tim Wilson said …
I use Fireworks to create the Design and then, I create specific PNG files for parts which need alpha transparency and export jpgs for other graphics. I will then import all the assets into Flash. I use separate files so it is easy to use the update option in the Flash library.
I love Fireworks, I think it is the best graphics tool, (yes better than photoshop
(unless you are editing photos)
on 28 Sep 2005 at 6:48 pm 16.Pascal Bompard said …
I do both the design and development for most projects, so workflow is quite simple.
All design/layout decisions are finalised in Fireworks*.
Where appropriate vector graphics are brought into flash (usually exported as SWF from Fireworks and then imported) and otherwise PNGs are imported into Flash.
I have migrated to ActionScript 2 with Flash 8, and I find the built-in AS editor to be more than adequate for my purposes
(*Fireworks is almost perfect for designing for online-media, so much more so than Photoshop or Illustrator - so please don’t kill it off…
on 29 Sep 2005 at 4:07 am 17.Omar Franco said …
As professional trainer and multimedia designer with international exp since ‘94. I have stuck to the fast ‘old skool’ way of starting storyboarding/layouts/project planning on paper. It’s a more cost and time effective process than just jumping in on software. “Pre Production = Thinking and problem solving”.
1. Then trace or generate all layouts in vector in Freehand*
2. Raster imagery in Photoshop - ImageReady
3. Video - Final Cut Pro/Motion/Quicktime Pro/Cleaner.
4. 3D - Alias Maya.
5. Audio - Audacity/QBase.
Then import Freehand vector data stright into Layers or keyframes - already laid out in multi-page layouts/plates to corresponding scenes etc.
Redo any vector graduation again in Flash. Convert all items separately into graphic symbols, then into buttons and movie clips etc. Convert all text into symbols.
Build animation and/or interactivity while logical labelling everything properly in library for easy Acionscripting access.
Test on PC and MAC consumer based platforms on various bandwidth - time, amend, debug, optimise refine etc.
Freehand versus Illustrator duel -
As an industry trainer I have conducted research and studied several types of vector based workflows, hence I base the following finding not to upset Illustrator fans nor to glorify Freahand ones. I can use and deliver training on the CS and MX suites. Here are my high lights-
1. Ergonimic+speed: When the old FH8 2-button shortcuts is set the two key function are faster to learn and memorise and easier to strike while still gripping the mouse with other hand It also has more intiuitive Key nameing convetions such as Grouping - cmd+G (all two mouse features on any app is better then one) - rather than the Ai 3 key function.
2.Path and Point control and modification is more intuitive in FH rather than Ai’s multiple tool button process. Again a much faster interface in point type modification and handles control in the Object pallete.
3. Colour mixing and modification between RGB and CMYK to RGB much easier in FH.
Freehand does have it’s flaws but it is better in worklfow and the easiest to teach out of the two. Let’s not forget the multipage feature !!
Be good you Mum !
OB1
on 10 Oct 2005 at 2:16 am 18.Joao said …
Dreamweaver
Fireworks for web
Photoshop for image manipulation
Flash
on 11 Oct 2005 at 12:11 pm 19.ABeall said …
If I’m designing myself:
Fireworks
[Photoshop for image touch ups]
Import FW.PNG into Flash
…long live Fireworks
If I’m handed a PSD:
I flatten elements that need to be Bitmaps
Rebuild in Fireworks if enough vectors are in use(usually the case)
Import FW.PNG into Flash
I rarely use FreeHand. It integrates with Fireworks better than AI, so if I need some advanced vector control I may make it in FH and copy/paste into FW, but FW has fairly robust vector control as is so I don’t often need to do this.
on 19 Oct 2005 at 6:39 am 20.Carlo Monnée said …
For first Quick Layouttests i use Illustrator.
But to work more precisely i have to Photoshop (CS Version). There I am doinig all of the Screendesign, to see which elements i need later in Flash. Sometimes i use the sclicing because it is very comfortable for exporting different file types.
If i need vectors i am doing them in Illustrator (Before that i used Freehand till Illustrator CS) and than mostly export them as swf.
on 25 Oct 2005 at 6:11 am 21.Casper said …
I had Studio MX 2004 and CS1 Premium at my disposal and this is how I would create sites which at their most detailed, were handed to me as Visio projects with a few logos and marketing images for reference.
For deployment as a Flash site (mainly minisite);
1.Mockup in Photoshop (sometimes Fireworks because it’s vector objects snap to pixels an allow for quicker editing, also allows exporting slices one at a time more easily and also ensures simpler colour consistency but all the other designers used Photoshop so that would get me in trouble.)
2. (optional) Swift 3D to animate AI file
3.Rebuild in vector within Flash (unless intricate then use Illustrator)
4.Use Dreamweaver to build an embed page.
For deployment on Sitecore
1.Mockup in Photoshop or Fireworks
2a.Slice up and export a bit
2b.Write code (HTML & CSS) in Textpad or I’d sometimes cheat and use Dreamweaver because it had the code auto-complete and dictionaries but then the UI would crash half the time so it couldn’t be relied upon.
2c.check code in IE and Firefox and other relevant browser.
2d. repeat 2a-2c for each subsequent graphic.
3. Hand to dev’s to use VisualStudio to apply it into Sitecore.
I’m assuming that with Flash 8’s improved bitmap and gradient effects that there will be little point using Photoshop in mockups for Flash (although resizing Bitmap’s in PS would look better).
on 25 Oct 2005 at 1:01 pm 22.Lora, web design coordinator said …
We work with Photoshop, Illustractor, then flash. Sometimes we use animated gif to create simple animation.
we show the design concepts to our clients in PNG.
as for the code, we employ professional html-coders who do write the html code manually in textpad. No dreamweaver - at least not that I know about it as I’m not an html coder myself… we check code in IE, Mizilla and FireFox. After some discussions, we decided not to check it in Opera as statistics shows that it’s now used by few people.
on 28 Oct 2005 at 7:03 am 23.Niko said …
Export a PNG or JPG in Photoshop and put it in Flash as a half opacity “tracing layer” (PNGs can cause strange shifts in colour though!). Then either redraw stuff inside Flash as vectors or export separate bitmaps for elements from Photoshop.
on 13 Nov 2005 at 7:50 am 24.richful said …
http://www.mgzc.com http://www.hksac.net http://www.hksaa.cn http://www.hksaa.net http://www.hksaa.com.cn http://www.hkce.org,http://www.hkce.net http://www.hkccr.org http://www.bviltd.org http://www.bvicr.com http://www.bvicr.org http://www.bvicr.net http://www.158hk.net http://www.ltdcr.com http://www.ltdcr.net http://www.ltdcr.org http://www.ltdcr.cn http://www.cegcr.com http://www.cegcr.net http://www.cegcr.org http://www.hkrr.org http://www.hktmr.net http://www.hktmr.com http://www.hkltdcr.com http://www.hkltdcr.net http://www.hkltdcr.org http://www.hkltdcr.cn http://www.oveltd.net http://www.oveltd.com http://www.oveltd.org http://www.oveltd.cn http://www.tradeinvests.net http://www.tradeinvests.com http://www1.158hk.net http://www2.158hk.net http://www3.158hk.net http://www5.158hk.net http://www.ovecr.net http://www.ovecr.com http://www.ovecr.org http://www.ovecr.cn http://www.hksaa.com.cn http://vip.ltdcr.org http://usa.ovecr.net http://www.ovecr.net http://google.ovecr.net http://cpa.ovecr.net http://cpaltd.ovecr.net http://hk.ovecr.net http://hkltd.ovecr.net http://usa.ovecr.net http://usaltd.ovecr.net http://bvi.ovecr.net http://bviltd.ovecr.net http://offshore.ovecr.net http://offshoreltd.ovecr.net http://www.hkrr.org http://vip.ltdcr.org http://cpa.ltdcr.org http://fjt.infoscape.com.cn/gate/big5/www.richful.net/ http://fjt.infoscape.com.cn/gate/big5/b2b.richful.net/ http://fjt.infoscape.com.cn/gate/big5/bbs.richful.net/ http://211.147.225.32/gate/big5/www.richful.net/English/default.asp http://211.147.225.32/gate/big5/www.hksac.org/ http://211.144.146.25/gate/big5/www.richful-hk.com/ http://211.144.146.25/gate/big5/www.richful.hk
on 28 Dec 2005 at 4:13 am 25.Stephanie said …
I love photoshop and photo impact they are all I use for photo tools!
on 25 Feb 2006 at 4:56 pm 26.Aparaty cyfrowe said …
Photoshop is very good for retouching photographs, I am doing all corrections in this program, there is for me no better. Designing on layers is also very useful. I am doing the most important projects in photoshop.
on 01 Mar 2006 at 4:26 am 27.buoy said …
Best design tool for creating designs for flash is fireworks. When importing fireworks png, complex effects stay as bitmaps, text stays as text and vector stays vector. BEST solution.
on 14 Mar 2006 at 1:16 pm 28.Notebooki said …
To the retouch I am only using the photograph photoshop, I overdubbed a few filters for me and there is for me no better program at this target.
on 01 Mar 2007 at 3:55 am 29.hrududu said …
Basically my workflow is as follows:
- Sketch out GUI ideas on paper
- Draft out interactivity on paper
- Jot down animation and color ideas on paper
- Depending upon the project’s brief,
decide which apps best suit the job; Flash,
Freehand, Illustrator, LiveMotion, SwishMax
- Get image and text content from client
- Batch process images (resize to fit
layout, sharpen). Normally client wants
slide show, so I use slideshowpro; prepare
images and xml files accordingly
- Convert client text content into raw text,
and tag with variables for dynamic
functionality
- Construct background elements and main nav
in Flash, LiveMotion, Illustrator or Swishmax
(depends upon the job at hand) recently I’ve
been using Flash, Freehand, Illustrator and
Livemotion
- Script the nav MovieClips in the library
- Create the required number of HTML pages
for the site; prepare for Google and SEO
- Using Flash, Freehand, LiveMotion or Swishmax
create the rest of the graphical and
interactive content accordingly,
scripting where necessary, calling ecternal
text, external jpegs and swfs
- When the project involves video, create FLVs
of video elements
- I’m currently experimenting with the idea of
using After Effects and LiveType for extra
vector animation (very quick for producing
animation)
- QA the project across multiple browsers and
platforms that support the Flash Player (FP9
sucks BTW, not as stable or as reliable as
FP8 IMHO)
- Fix bugs
- Final QA
- Publish via FTP
I keep everything in vectors as much as I can. This means Illustrator 10, Freehand 11, LiveMotion 2 and Flash 8 Pro are my main tools.
I make vector shadows in AI and export them out as SWFs and they retain the vector info! (unlike LiveMotion that converts multilayers into bitmaps). On the Freehand side, I can’t stand the so-called “Shadow” Freehand Xtra, which is why I make my vector shadows in Illustrator 10.
I export multiple-paged Freehand files as a single SWF, calling them into action from a navigation movie clip in the main SWF made in Flash. The interoperability with these vector apps are endless. Absolutely enjoy the whole SWF authoring shebang.
I make multiple SWFs in Flash, calling each file into a different level. SWFs exported from AI, Freehand, LiveMotion and Swishmax are similarly called into action.
Freehand is rock solid, fast, flies like the wind and is very easy to work with. Just waiting to be converted into a “Flash Elements” application IMHO; just by merging Livemotion’s timeline with Flash export to FP9 functionality, would make this new Freehand an incredible Flash authoring tool. Well, IMHO that is.
I’ve removed CS1 - its performance is a chronic. I have reinstalled Photoshop 7, ImageReady 7, Illustrator 10 and Acrobat 6. Performance is much improved and I don’t miss any of the major new features in CS1 or 2.
I batch process images (and apply sharpening at the same time) with free utilities (Resize for Mac OS X and Image Resizer Power Toy from Microsoft - though the latter fom Microsoft cannot apply sharpening at the same time). I batch rename files using Automator (Mac) and Ant Renamer (PC) both are freely available, albeit one comes with the OS. When I need to correct levels in a batch I’ll use Photoshop or ImageReady actions.
I really enjoy working in ImageReady. I use it extensively when I need to work on individual images - those that don’t conform to any of the above batch processes.
..and that’s about it
on 30 Oct 2007 at 9:25 pm 30.Daniel said …
I couldn’t understand some parts of this article Feedback: What design tools do you use?, but I guess I just need to check some more resources regarding this, because it sounds interesting.
on 10 Dec 2007 at 11:42 pm 31.http://idisk.mac.com/fmp3musicdownloads/Public/free-legal-music-downloads.html said …
Thanks boys85da1b88e7d0ac841b56dc14e156916a