Site Building Blocks

Converting Your Sketch to a Base Layout in Photoshop

It will definitely be helpful for you to have some base knowledge already of Photoshop. However, I will be explaining every technique and hot keys that I use in the tutorial. I will be going at it rather fast-paced, so if you feel the need, it's alright to pause or replay certain sections of the video.

So far, we have learned a lot of great Web design layout theory. Now it's time to get into the technical aspects of things. We will be taking the base sketch thumbnails that we created earlier and bring them with Photoshop and create some basic elements for which we will design the rest of our site. I have provided a video tutorial for you to follow along with. It will definitely be helpful for you to have some base knowledge already of Photoshop. However, I will be explaining every technique and hot key that I use in the tutorial. I will be going at it rather fast pace, so if you feel the need, it's alright to pause or replay certain sections of the video.

Before Getting Started

The GRID. This is something we should all have a solid understanding of before converting our sketches into Photoshop wireframes. The grid is an absolutely essential tool that will keep your layouts looking clean, organized, and professional. If you have taken Typography class, you may already be familiar with this. It is just as important in the web as it is in print.

What it essentially comes down to is making sure that you are mindful of how your text, images, and columns all line up. If graphic elements are just loosely and thoughtlessly placed into a layout, it will absolutely give your design away as AMATEUR. Using a grid may be one of the easiest ways to cross that threshold into the realm of professional design.

Admittedly, in this tutorial, I did not use a grid. However, I did make sure that all of my elements were neatly aligned with each other. Whether or not you use a grid, what is most important is alignment - both vertically and horizontally.

Please read this article to further understand best grid practices before moving on to the video tutorial.

Download this lesson's source files here.

Basic tools

We will be able to do a surprisingly wide variety of tasks using very few tools in this phase of the development. These are the following tools and techniques that I will be going over in the video:

Rectangle vector shape tool

The Rectangle Tool shares the same spot on the tool bar to the left as several of the other vector shape tools. The hot key is U. There are three main modes that we can use with the vector shape tools: Shape, Path, and Raster. For this particular exercise, we want to use "Shape" mode. By using this mode, every time you draw your rectangle, an entirely new fill layer with a vector mask will be created.

Move Tool

This tool essentially allows us to select and move layers around. The hot key for this tool is V. However, you can also access this tool by pulling down the command/control (Command in Mac, Control in Windows) key while using any other tool. By holding down the command/control key we have temporary access to the move tool without having to switch back-and-forth between our different tools. This can greatly speed up productivity when working on a file. Another feature to be aware of is the "auto select" feature. If you currently have the Move tool selected and you hold down the Command/Control key, this will automatically select whatever where your mouse is currently over. In the very top left of the screen there's a checkbox that says "auto select". If this is checked, you do not need to hold down the command key in order to auto select items.

Type Tool

This tool, as the name suggests, allows us to type text in our document. There are two main ways that we can use this tool. One way is to simply click where we want to begin typing. The other way is to click and drag a rectangular area to create a boundary box for our text. Each method has different advantages and disadvantages. I will demonstrate how they can be used in the tutorial video.

Use a GRID!!

One of the best ways to take your layout from amateur to professional is basing your layout on a solid grid structure. Many resources exist to help with this issue, but one of the best I've found is 960.gs. This is a file download that allows you to use a grid in just about any format, from Web code to Photoshop to Illustrator to InDesign. I strongly recommend using this grid system to help you with your layout.

Visit 960.gs and click the "Big Ol' Download Button". After downloading, go to the folder "Templates", then "Photoshop", then 960_grid_12_col.psd.

Use Document Presets 

This is VERY important. When you're creating a new document in Photoshop, choose "Preset: Web", then choose  "1024 x 768". This will automatically set your document to the proper size, DPI, and color mode. Many people end up creating MASSIVE documents that are not practical to view on the web.

Once you've choose the Web > 1024 x 768 preset, it is ok to increase the height of your layout if needed. Just go to the "Image" menu then "Canvas Size". You can then increase the height. Be sure to click the top-center box in the "Anchor" grid while in the "Canvas Size" menu. This will add the extra space to the bottom of the layout.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu