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.
The first step in any design project is creating a new file and if this is your first project for the web, the setup is probably going to be a little bit different than you're used to. Let's explore how I go about setting up a new document for a web-based project. I'll start by going up to the File menu and choosing New. You can also hit Command+N or Ctrl+N on your keyboard. Once I am inside the New Document dialog box, I have the ability to name this project, so in this case I'll just call it Website Mockup. And directly underneath that I can choose from a series of presets.
Since I'm designing for a web site, I'm going to choose Web, because this sets a couple of essential document presets that I need going forward, like the Resolution--72 pixels per inch, which is standard for screen design-- and the Color mode is also set to RGB Color, which is also essential for screen-based designs. The size of the document is ultimately going to be dictated by the project that you're working on. But in most cases we'll assume before designing a web site that the end user has a higher-resolution monitor than just simply 1024 x 768.
In my personal workflow I design web sites that range anywhere between 900 pixels and 1000 pixels wide; therefore, I design my documents at about 1200 pixels wide so the design has breathing room around the outside of it and also so I can simulate what it's going to look like in a larger browser window. So for this document here, I am simply going to type in 1200 pixels for the Width. And let's assume here that I'm designing a blog, for instance. I'm going to increase the Height significantly for this, because I want to leave room for things like blog posts widgets, footers, all that kind of stuff.
So I'm going to increase this to about 2000 pixels tall. If I find this works for me on a regular basis for blog design, I can come over to the right and I can choose Save Preset. By choosing Save Preset, I can go in and I can say Blog Design for the Name. I can choose to include the Resolution, the mode, the Bit Depth, Content, Profile and Pixel Aspect Ratio, which is exactly what I want, and I'll hit OK. Once I hit OK, that is now saved as one of my presets, so anytime I go back in to create a new document, I can simply drop this down, go to the top, and Blog Design is listed right there.
Once I select that, all of my options are exactly as I need them to be, and I can hit OK. Once you hit OK, you're ready to start mocking up your masterpiece.
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.