Using photoshop to design layouts
Monday September 8, 2008
Sometimes, I get so caught up in teaching people how to build websites, that I forget to talk about how you might figure out a design to build. One of the popular tools for prototyping is Photoshop. I use a combination of Photoshop and Fireworks to build my designs. I use Photoshop for the initial designs and all graphics, then I use Fireworks to slice up the page into graphical and HTML elements. Finally, I move into Dreamweaver to get the HTML, CSS, and JavaScript just right. Then today, I found this article on BulletProofBox that I thought was really helpful: 9 Essential Photoshop Web Design Tutorials. It starts out with some templates in Photoshop (including an interesting portfolio one) and moves on to tutorials explaining how to use Photoshop for Web design. Nice!
Comments
Is there and advantage to slicing up the design in Firworks instead of Photoshop, or is it just a personal preference?
Honestly, I don’t think there’s that much difference now. It’s just that when I started that workflow, Photoshop didn’t have any way to slice images and connect with Dreamweaver or another HTML editor. Now that you mention it, that’s a good point. I think I’ll see if I need Fireworks when CS4 comes out (late September, yay!).
What about Illustrator? Isn’t it easier to create a layout since it is a vector program? I’ve been using the GIMP for quite awhile and its a pain sometimes when changes are needed. What are your opinions?
I use Photoshop as well as Illustrator. I think it depends on what you would like to do with your design. I am never satisfied with the lines and forms photoshop does. Since everything is required to look kind of “web 2.0″ I started using Illustrator even more because I seem to get quicker results there.
I use Photoshop extensively till any website design template is finalised and then use slicing as Jennifer suggests to htmlize the page.
You can also use services like psd2html.com to take your Photoshop files for you and do all the html and slicing for you.
Alec
DesignBay