How to Create a Website Mockup With Photoshop
When creating a website, sometimes the hardest part is determining the layout. Adobe Photoshop provides a quick and easy way to create a website mockup. By using layers and a combination of Photoshop's design tools, the process of rearranging the look and feel of your website can save you hours.
Other People Are Reading
Instructions
-
-
1
Determine the size of your mock website canvas based on your audience. For example, for an audience that still uses a low-resolution cathode-ray tube monitor, you would want to use a canvas size that is 760 pixels wide. However, for a flat-screen monitor with the resolution set at 1,024 by 768, you would want to use a canvas that is 975 pixels wide. Create a new document and set the canvas size.
-
2
Determine the layout of the website. Use simple squares or ellipses to mark off the different sections for your mockup. For example, mark off a space for the top banner, the side banner, the content and the footer. Create each feature on a new layer so that you can easily rearrange the website.
-
-
3
Determine the font size and fill the sections that contain text with placeholder text. Doing a quick Web search for Lorem Ipsum, a Latin speech used by designers to see how text will look on a page, will generate this text for you. If the background or any other sections will consist of a color, fill them with the correct color.
-
4
Create the graphics. You can use Photoshop to create these graphics, such as the banner or logos, or pull them from another location. Place and position the graphics in the mock website. Select "File" and then "Place" and navigate to the image. Note: Keep a Photoshop version of the graphics so that you can edit them later.
-
5
Fine-tune and edit the mock website until the website looks the way you want it to look. Because each new feature is on a different layer, you can quickly move around sections, hide sections (click on the eye in the layer pallet) or replace images and colors.
-
1
