Photoshop for dummies – Specifically web designers
Photoshop is the most un-intuitive program I have ever used. I taught myself to code HTML, CSS, XML, PHP, MySQL, and more. I taught myself how to use Dreamweaver and Fireworks. I cannot figure out how to do simple tasks in Photoshop.
All the rage lately has been taking PSDs and coding them into HTML. So I figured it’s going to come up eventually. Well it came up. I spent a lot of time looking at different web tutorials and videos. They all seem to be focused on a specific task like changing the color of the background, or taking one person’s head and putting it on someone else. Some were good on PSD to HTML, but there was one major drawback….. Even the simple tasks, like “save the selected area as a new file” were very difficult for me to figure out how to do.
Now, you may be thinking either, “yeah, that’s me too” or “what a dolt!”. Either way, if I had this issue, I’m sure someone else has as well.
In Fireworks, it’s very easy to do this. All you have to do is hide the layers you don’t want seen and draw a box with the web slice tool, right click, and save. In Photoshop however, even finding the slice tool was a pain. (It’s under the crop tool)
So here is the PSD for this job that I got.
The first thing to do is to plan on the stages of layers you need to hide to get what you want out of the PSD. As you can see in the screenshot below, I was able to get what I needed with only two stages. The first stage was the original PSD. I pulled the background. Then I hid the background layer and sliced the logo, the nav bar, the icons in the top right, and the search bar.You may need to go through this several times depending on the complexity of the PSD.
Once you have the slices marked you have to take a few more steps than you do in Fireworks. When you create a slice, Photoshop makes the area around your slice slices as well. What you have to do is select the Slice Select tool (same place as the slice tool) and click on the slices you don’t want to export and mark them No Image slices. You then click on all the slices you do want and give them appropriate names.
Once you have all of the slices marked, under the file menu select Save For Web and Devices. This will pull up a menu where you have to click on each slice and select the file format for each. If you need transparency, you need to specify it here. Then select Images Only, hit save and it exports all of the files!
