molly.com
Wednesday 31 October 2007
Photoshop and Designer Friends Please Lend Me Your Wisdom
When asked what I use to create web sites, I default to the three most important tools in my entire career: Photoshop, a good text/html editor with color coding, and an intuitive and secure FTP client.
As an educator focused on standards, and teaching technology to designers, I fear I’m not spending enough time in the visual world. I have all the tools, but over time, MY time with Photoshop has decreased while my attention to CSS and markup has increased.
Lend me your wisdom, oh designer friends. I need you!
Filed under: professional, web design and development, society, creativity, molly asks you, community
Posted by: Molly | 12:07 am |
October 31st, 2007 at 12:50 am
Dearest Molly,
I’ve passed through a similar situation, having some skills (tech, comunicational, emotional, etc. skills) ultra sharpened while others roughly cut through butter, but by comming aware of it and spending some time pondering and watching around.. I stumbled with something worth quoting:
“…The level of the output is determinded by the frequency that we test our abilities and the purity of our motives.”
By thinking about that It reminded me that other older saying: “practice makes the master”
About the tools, my dear, those are the same for me, Photoshop, Text editor (I recommend http://www.pnotepad.org/) and FileZilla have made it up so far with me!
Keep it up, as you might be a great teacher, beacuse you’ve taught people a LOT, including myself
Best Regards,
Franklin
P.S.: I just simply loved you in Fundamentos Web 2006 (Oviedo, Spain)
October 31st, 2007 at 1:20 am
Personally I have been traveling back and fourth between the different angles of todays web. Whether its the visual graphical stimuli to coding poetry and even that ever engaging video/audio world and continue to always look for a place for a rest. Whats interesting about that place where you come to rest, you find its a new stronger launch of your next creative period in what ever you set out in your mind to do.
October 31st, 2007 at 1:25 am
Lately I’ ve been using Illustrator to create the general layout. I find Illustrator much more flexible than Photoshop. The latter will be definitely used for all the design details e.g. forms, logo etc.
Coda is a great editor. It is an FTP too. You might care to check it out.
October 31st, 2007 at 1:42 am
Hi, Molly!
Ditto the tools [PS, BBEdit, SecureFetch]. What I’ve spent some time learning lately is Flash, not for making animations but for building slide show modules for my students based on tutorials in Flash Journalism (Mindy McAdams).
Kathy
(from WWW Conference, Japan)
October 31st, 2007 at 2:08 am
Hi Molly,
* Fireworks for wireframes and layout templates - simple and intuitive, powerful, eats bitmaps and vectors, easy reuse of elements from projects to projects (libraries), etc.
* Photoshop for heavy photo editing, Illustrator with plugins for complex vector tricks and flash for video encoding (FLV) and animations.
* Work on PC so I use EditPlus for code (mainly (X)HTML / CSS / JavaScript)
October 31st, 2007 at 3:18 am
For me it’s:
1. iPhoto for inspiration / graphic collection using albums. This is my ‘what have I got marked that I want to use phase. I have client design question sheets every client fills out for my projects and from this I spend time brainstorming and playing about with ideas.
2. Moleskin layout and rough concept. I’ve also been known to use a white board at this stage if it requires development. Something about working out databases and user cases using white boards that seems ingrained in me.
3. Photoshop for layout template with design. If it’s going to need illustration then Illustrator comes out and I use that and the smart object import into photoshop. This stage for me is about creating as close to the real thing as possible.
4. Go back to moleskin and write down each elements size, font colours and basic css before even making the site up. This way I have a quick checklist I can create the design in code from. I always make up each graphical element and save them before coding so I can just plough through making it up.
5. Textmate for the code. I find using a darker theme on Textmate works better for me - just can’t abide coding on white for some odd reason.
6. Transmit for the ftp.
The moleskin non techie phase really to me is the most important one as it’s where I’m free to think things out before getting into the digital part. I also find iPhoto invaluable as a scrapbook. I studied art and can’t seem to get out of the ’sketchbook’ being a crucial phase for me.
October 31st, 2007 at 4:53 am
Good that I got to meet a professional colleague.
While I had plans to be in the field of computers and technology, I took diploma in multimedia. Learned good deal of Flash and Photoshop.
But it was my boring formal education that I had to follow as now I teach Economics and Politics to school children- forgetting all the designing skills I learnt. So I feel what you are going through.
Hopefully, some designers will give good leads to you.
October 31st, 2007 at 5:23 am
I’ve been doing the same thing. Getting stuck into the CSS and Javascript sides of things and ignoring Photoshop.
I found the answer was to make time to play in Photoshop for fun. Do a few personal projects. Get out and take photos, then come back and mess with them in Photoshop. Find a visual effect you really like and teach yourself how to do that. Perhaps subscribe to a few visual inspiration blogs (such as monoscope.com) and read about the creative process behind things. Watch the Layer Tennis matches and marvel at just how far you’ve got to go — and use that as inspiration to get back on it. Maybe do mock-redesigns for your blog or other personal projects (no need to finish or publish them, it’s just to get the creative juices going). Don’t be afraid to try things out of the ordinary, or outside your “CSS safe-zone”, i.e. try things you’re not sure you can achieve on the web. You can worry about that later.
Most important though is to make the time and actually do it.
October 31st, 2007 at 5:48 am
1. Sketchbook/Scrapbook for inspiration.
2. Adobe Kuler for color schemes.
3. Photoshop/Illustrator for finishing the design.
4. TextWrangler for hand-coding xhtml and css. I made a set of scripts for TextWrangler so I don’t have to type tags anymore. I’ve recently made them open source and available from my website.
5. Transmit as FTP client.
October 31st, 2007 at 5:51 am
For me it’s:
* Photoshop CS3 for general web design/layout with sprinkling of Illustrator CS3, if warranted.
* Notepad2 and/or Dreamweaver CS3 (as a glorified text editor) to coding HTML/CSS.
* Dreamweaver CS3 built-in FTP capabilities or for stand-alone… Filezilla wins hands-down.
October 31st, 2007 at 6:05 am
I’m all about Photoshop, CoffeeCup HTML Editor and CoffeeCup’s FTP program. They’re cheap and work well for me. At my day job, I have Dreamweaver and use it, but it makes me lazy sometimes and it’s expensive so I avoid it for my outside work.
As far as learning Photoshop better, the only way is to do it. I don’t think playing is the best way to learn Photoshop, you have to have real projects where you can achieve real results.
I was a print designer for 15 years or so before I ever touched HTML (Yes I’m one of those people), and I have used Photoshop since the first version came out. I try to start all my layouts in Photoshop and then figure out how to make them happen in CSS.
I designed in CSS for a while when I first began learning about it, but I wouldn’t wish those boring designs on anybody. Photoshop is still the best sketchpad I have.
October 31st, 2007 at 8:21 am
Looks like I’m one of the few Fireworks users here. Aside from more advanced photo retouching and effects, it does everything that I would need from Photoshop, plus adds a lot of really helpful stuff specifically for web design (Pages, symbols, libraries, etc)
At work we use our own CMS and I typically just hand code everything right in the CMS interface in the browser. I used to code first in EditPlus, but it was really just an extra step that wasn’t all that necessary.
For other sites, not based on our CMS, I typically use EditPlus or Dreamweaver. Although it’s pretty rudimentary, I have found the check-in/check-out feature in DW to be useful when working from multiple machines. It’s no CVS/Subversion replacement but in some cases can be all you need to make sure things are in sync.
October 31st, 2007 at 8:40 am
* Firefox with Firebug and Web Developer Toolbar
(edit HTML & CSS, with live preview!)
* Notepad++
(great, and free)
* Photoshop CS2
(cost to upgrade doesn’t seem justified yet)
Notes:
* Still looking for a good cheap/free (S)FTP client for Vista. Currently using Vista’s network spaces.
* e-Text Editor shows promise, but so far the bundles are awkward.
* Jumpchart shows promise as an IA/wireframe tool.
* Tried Expression Web full version; a good effort, but still way too clever and automated for its own good.
October 31st, 2007 at 9:03 am
I too begin with Photoshop for the layout (once I have the site structure down, usually on paper first). I create the graphics I need (not so much nav buttons anymore, but they have their place as graphics) then go to Dreamweaver.
You learned the advanced CSS stuff you know by practicing, same with Photoshop (or Fireworks, or your favorite flavor of graphics program!) - same as in music. Gotta practice those boring scales every day, gotta practice those techniques in PS/FW that will eventually be almost muscle-memory.
After last weekend, I now know how much CSS practice I must do!
(and thanks again for your generosity, too!)
jk
October 31st, 2007 at 9:23 am
I usually use Photoshop or Fireworks for mockups, depending on the project. I use Dreamweaver in code view only for the HTML and then I use CSSEdit for all my CSS, which is my favorite part of the process. I use Transmit or Dreamweaver for FTP software. When I work on projects at home, I use Coda. Coda and CSSEdit are only available on the Mac platform as far as I know.
October 31st, 2007 at 10:39 am
Same here - less and less Photoshop for anything other than actual processing of my photography. More and more Fireworks for web graphics processing, although I’ve mostly traded in my designer hat for a coder sombrero. TextMate is my primary code editor these days, and SFTP with Cyberduck or Interarchy.
October 31st, 2007 at 2:28 pm
My favorites on Windows:
PSPad for coding pages with UTF-8 encoding and “The Gimp” for all my images. To transfer my files to webspace, I use FileZilla. Simple and easy.
My favorites on Fedora Core:
Bluefish for coding my pages, also with UTF-8. “The Gimp” for my images and gFTP for file transfer.
October 31st, 2007 at 2:48 pm
It’s true for me too. It feels like I rarely open photoshop anymore for anything other than personal art projects. Generally it’s a few quick sketches on actual paper to get an idea down then jump right into code. Textpad/Firebug/Web Developer Toolbar are my code creation helpers. I’ve been using Textpad for so long now that I’ve never looked for cooler replacements although I may explore some of the others mentioned here. (I don’t use FTP because my development environment doesn’t require it.) If I need to give a formal wireframe, task flow chart or mockup, I generally use Axure.
November 1st, 2007 at 7:36 am
As far as graphics, and I am not a designer nor developer by any definition, Digital Film Tools 55mm commercial filter for Photoshop is invaluable. Photoshop’s Image Ready for graphic optimization is used. For photographic asset management: Adobe Bridge and Lightroom. Fireworks is one hell of a vector/raster hybrid that is used for layout designs and slicing. For Web graphics, no jpeg’s … png exclusively.
CSS — News Gator’s (formerly Bradbury) TopStyle Pro.
Code Banging: Used to use Allaire’s Homesite but have switched to Blumental’s HTMLPad. EditPlus is used for quick edits for code behinds and script sources.
Accessibility and Security Analysis: Watchfire and Hiawatha Software products.
The most valuable tool and the greatest software value that I have ever purchased: CSE HTML Validator. This single app has taught me more by using it than any video tutorial or manual.
Molly: You may want to touch bases with the developer of CSE HTML Validator. That app is available for your Train the Trainer Grab Bag at no charge if you want.
November 1st, 2007 at 10:10 am
I use Photoshop (and occasionally Fireworks and Illustrator) with Karma Wizard (http://karmawizard.com/home/), a CSS design wizard for KarmaCMS hosted XHTML 1.0 Strict sites. Powerful tool. There are dozens of pre-sliced Photoshop layout structures available for download (though you can use whatever design program you want to create your images). Basic layout issues are managed through the wizard, and advanced features are handled through the Custom CSS area. I’ve learned a lot of CSS through this process. Started knowing zilch.
November 3rd, 2007 at 9:29 am
Oops. I meant to link that: Karma Wizard
November 6th, 2007 at 2:42 am
For photo editing on a (low) budget, Photoshop Elements 5.0 does the job for me. All for less than an English fiver (and perfectly legitimate I hasten to add), I got it for the price of a promotional years hosting £1 + postage £3.75. But then I am a notorious cheapskate.
Seriously though, for the majority of web work, I think that Elements is more than capable and there are plenty of books that can help achieve some of the more tricky things.
November 6th, 2007 at 11:07 pm
NotePad++ for UTF-8 authoring
The GIMP for all my image manipulation needs
FireFTP for sending my UTF-8 and binary off to the server
November 9th, 2007 at 7:51 am
FreeMind to get the flow going.
Fireworks for quick layout, it’s just really flexible.
Photoshop when it comes time to roll up the sleeves.
BBedit for that coder in me.
CSSEdit for that CSS kid in me.
Transmit to get it up, or Viagra, but Transmit is better for files.
November 13th, 2007 at 5:22 pm
In general (depends on the computer)
for design:
Adobe Illustrator, Inkscape, The Gimp
for web development
Firefox + Firebug + Web Developer Toolbar + MeasureIt + HTML Tidy + ColorZilla
IE + IE developer toolbar
On Windows
Notepad++, FileZilla
On Mac
Coda, Transmit
November 15th, 2007 at 9:01 pm
I have visited your site 845-times
November 15th, 2007 at 9:02 pm
I could not find this site in the Search Engines index
November 23rd, 2007 at 8:31 pm
I quite like Expression Web, its pretty nice to work with, still needs a bit more polish but its pretty good for creating CSS based Designs
+ many of the other graphical tools mentioned already
December 3rd, 2007 at 2:43 am
I use ActiveState Komodo Edit for text editing, FileZilla for FTP and Adobe Photoshop for graphical work.
December 5th, 2007 at 10:24 am
It won’t come as a surprise that I too use both Photoshop & Illustrator for the design fase of site creation (even though here in Europe the CreativeSuite costs about double of the price in the US).
For coding I like to use Aptana. Although rather processor consuming it does provide me with a good editor for both css and Rails.
December 18th, 2007 at 3:44 am
Same thing here: less and less PS and more CSS.
Which is a good thing as companies these days begin to realize increasingly that a designer should design, a programmer should program and you need a CSS-gal/guy to glue it all together. (EditPlus & BBEdit depending on the offered platform)
Cyberduck for FTP for the occasional small site. Otherwise there a Subversion/CVS available with a programmer that brings the goodies from testing to staging to production.
March 16th, 2008 at 2:54 pm
Photoshop is the best to work whit Pictures.
July 23rd, 2008 at 10:41 am
Thanks for article
August 5th, 2008 at 7:15 am
zyzLsN qazwsx