Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Another application that integrates seamlessly with Adobe Photoshop is Muse. Muse is a brand-new application of the Creative Suite. It's available as part of the Creative Cloud subscription. Muse is basically Indesign for the web, which allows you to create web sites without learning any code. Let me jump over into Muse really quickly and show you how to set up a brand-new document. I'm going to first create a new site. I'll just stick with the defaults for now and hit OK. And once I am inside of Muse, I want to go ahead and go to the homepage right here. Just double-click that to start editing. And I can place the object anywhere I want. And so for now I'm just going to go to File, and I'm going to choose Place Photoshop Button.
Now on my desktop, in the exercise files folder, I have a chapter 12 exercise files folder and a Muse folder. I'll grab the button.psd and open it up. When I do that, Muse is automatically going to try to detect things like the Normal, Over, and Down states. If I jump back over into Photoshop, you'll see that I have layers named Normal, Over, and Down. You don't have to have an active state necessarily, but you can if you want to. Normal, Over, Down, and Active are the four states supported here. Once I am inside of Muse, I can actually choose those states based on the layers.
After I line them up, I hit OK, and Muse gives me a loaded cursor where I can place the button. And I'll just place it somewhere in the middle of the screen like so. Now if I go to Preview in Muse, I get to hover over this and it turns into that color, and if I press it, it turns into the lighter color. So again, there is the Normal, the Over, and the Down state, just like that. And I didn't have to write any of that code. All I had to do was create three layers in Photoshop.
There are currently no FAQs about Photoshop 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.