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.
Before beginning any web design project, it's good practice to start with a wireframe of the project first. This gives you a roadmap to follow as you start to aggregate content and create your finished mockup that you'll be delivering to your client. Use the wireframe to determine things like margins and positioning of major elements like logos, graphics, and background elements. If you're unfamiliar with creating wireframes, it'll be a good idea to go back to chapter 5 of this course and go through those movies prior to jumping into this chapter. I've created a very basic wireframe for us here, and it will serve as the backbone of our design going forward in this chapter.
I also have opened a finished project for this robot toy company site that we're going to build. Notice that it has the same basic structure as the wireframe, and it also adheres to the margins and content placements that I outlined in the wireframe as well. Throughout this chapter, we'll be building up to this finished product and by the end, you'll have a full working mockup just like the one you see here. Let's get started.
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.