Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Adobe Fireworks is one of the unsung heroes of the Creative Suite. It's also one of my favorite applications for web and screen-based design. I say that mainly because Fireworks is a vector editing program that allows me to create scalable user interfaces. It also has cutting-edge tools like CSS Export and a really refined Save for Web area as well. You can open up your Photoshop files inside of Fireworks and take advantage of all of these powerful features. If you go to File > Open you can find a Photoshop file, like the robot_ad in the chapter 12 exercise files folder, and open it up.
Fireworks is going to ask you how you would like to open the file. It gives you dimensions and a resolution. You have to rasterize portions of it, unfortunately. Then you also get to choose the document state. If there are other layer comps, you could choose that, but there's not in this document. You also get to choose the way it comes in, whether or not you maintain the layer editability over the appearance, whether or not you maintain the appearance, if there is some sort of custom setting, or if you just want flatten it into one big image. I'm going to choose to maintain layer editability. That way I get individual control over each aspect of my design.
I hit OK and it opens up my file just like it would in Photoshop. If I grab my Move tool, you'll see here, I can select each individual portion of this and I still have layers over here on the right. It even brought in the layer group. If I wanted to change the text, I just switch to the Text tool by hitting the letter T and I can select and change the text any way I want. I can then use Fireworks's powerful vector drawing tools to add things to this. I could also create multiple states and multiple pages and then when I'm done, I can use the cutting-edge Save for Web tools that are built into Fireworks to export this out with a minimum file size.
I understand that people have a comfort level with Photoshop and many people enjoy working in that versus working in any other application. Some people don't even know that Fireworks exist. But my suggestion to you is to do whatever you want inside of Photoshop and then bring it into Fireworks to do a little exploration. You'll be glad you did. If you'd like more information about Adobe Fireworks, check out Ray Villalobos's Fireworks CS6 Essential Training, which is available in the lynda.com online training library.
There are currently no FAQs about Photoshop CS6 for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.