In this tutorial we are going to walk through a free Photoshop extension called Velositey. Velositey (currently at version 2) provides common layout patterns to build website design prototypes within Photoshop.
“Spend more time perfecting the details and styling and less time on all that boring stuff.” - Velositey
Repetitive Layout Patterns
Before we get our hands our Velositey, let’s first examine some common layout patterns found in many websites these days.
Firstly, on large screens, they have a navbar with their logo image set to the left and the navigation to the right. Below the navbar we typically encounter a hero image along with a couple of buttons displayed through an animated slideshow. After the striking header areas, we often find columns or some kind of grid-based layout.
Since this type of layout is so common in the wild, you may often find yourself building something similar. Prototyping familiar layouts time and time again can therefore become a repetitive task.
In this tutorial we will walk through Velositey’s features and learn how to use them to automate common tasks, ultimately speeding up our prototyping workflow. Additionally, we will learn how to make use of Photoshop’s native features to customize and add some bells and whistles to our prototype.
Without further ado, let’s get started!
Pre-requisites and Setup
The minimum requirement to run Velositey is Adobe Photoshop CC 2014 / CS6. Also ensure that you have Adobe Extensions Manager installed. With those present, download Velositey (you’ll need to pay with a Tweet or Facebook post) and install it through Adobe Extension Manager.
Launch Photoshop and navigate to Window > Extension > Velositey to reveal the Velositey panel.
The Basic Layout
To start off, we‘ll create a bare layout.
Creating New Document
First, we need to create a new blank document via the [+] New Template button within the Velositey panel.
This newly generated document will come with guides line spanning 1170px width with 30px gutter. This is a convenient arrangement if you plan to use Bootstrap as your website grid foundation.
Adding a Header
One of the initial things you’ll see under the [+] New Template button is a series of tabs, the first of which is for headers. I’m going to opt for the 10th header pattern. Click it, then Velositey will instantly generate the header and put it in the document.
In our case, it gives us a header with the logo set to the left and the navigation to the right. In Photoshop’s native Layer panel, you will also find the layers are properly structured and named within the Header group.
Note: if you later opt for another header option, Velositey will replace the first example.
Adding the Slider Section
Despite the disadvantages, many people still want a slider in their website. Adding a slider area is as easy as the header area; Velositey provides a set of slider patterns ready to add with the click of a button.
Here I’ve opted for the last slider pattern which gives us a slider containing a heading, dummy content, and two buttons.
As you can see above, you will find a new group, Slider, added within the Layer panel where all the slider layers reside.
Adding the Content Section
Adding the content area is similarly straightforward. Navigate to the third tab in the Velositey panel and you will find a few content options.
I’ve opted for the third style, giving us the content laid out in three columns with each column comprising a heading, an image placeholder, and dummy content.
Adding a Module
A Module, in this case, is an independent content block. It is up to us to define the content and what it is used for. Unlike the Header, Slider, and the Content areas we are able add multiple modules within a single document. Here I’ve added the second Module pattern:
The second type of module gives us an image placeholder (which spans across the document grid), a heading, and a few lines of dummy text.
Adding the Footer Section
The last section of our website will predictably be the footer. For footers, once again, Velositey gives us a number of preset patterns to choose from:
The first footer pattern gives us the following footer layout:
At this stage, we have completed adding all the necessary website sections–from the header to the footer–with only a few clicks. To arrange each section properly, you might want to add some vertical spaces between them like so:
Now we have the basic layout in place, it is time for us to customize it. We need to alter a couple of things to make the prototype presentable.
The rule of thumb when it comes to customizing Photoshop documents is to leave the layers intact whenever possible. Each layer should be customized without destroying its initial form or properties. This leads us to employ some Photoshop features such as:
- Smart Objects and Smart Linked Objects
- Adjustment Layers
- Layer effects
Additionally, I prefer to use the minimum amount of layers possible.
Using Smart Objects
In our case, Smart Objects are useful for including the logo image.
To begin with, select the layer named logo within the Header group (currently a rectangular Shape layer). Then, right-click and select the Convert to Smart Object option.
The logo layer is now a Smart Object.
To place our logo within this layer, right-click the logo layer and select the Edit Contents option.
This will lead us to a new document within the Photoshop window. Within this tab, set the rectangular Shape layer invisible, then drag-and-drop the logo image into the tab, aligning the logo to the left. As you save the file, the changes should be reflected in index.psd.
Now we are going to convert the logo layer, which is now a Smart Object, into a Linked Smart Object. This effectively stores our logo as an external file. To do so, right-click the layer, and select the Convert to Linked... option.
Photoshop will prompt you to save the Smart Object file, .psb. Save the Smart Object of the logo within a typical organization as you would do when organizing the website images. In this case, I would save it in a folder named
“Keep stock photos/icons in a folder close to the PSD, not in a desktop folder named “Misc stuff” - Photoshop Etiquette
As we’re working with Smart Objects now, let’s reuse the logo within our footer. Head over to the Footer group and find the logo layer. Right-click the layer and select Replace Content....
Navigate to the folder where you saved the .psb file of the logo, select the file, and hit the Place button. You should now have the logo within the footer.
Repeat these steps to place images in the other sections; Content, Slider, and Module. Once that is done, you should have a similar result to mine below:
Using Layer Effects
Adding a layer effect will probably be familiar to any of you who have been using Photoshop for a while. Layer effects will apply one or more effects such as color, gradient, shadow etc. on top of a layer. In our case, we are going to use it to set a new color to the logo and add a gradient.
Starting off by selecting the logo layer within the Header group. Then select the fx icon within the Layer panel, where the effect options reside. Select Color Overlay..., and set the color to white.
Repeat this step to customize each navigation link color, the icon color in the content section, and the button color in the slider. Additionally, add a gradient effect to the slider image to give more contrast between the header and the slider, making the logo and the navigation more readable.
Using Adjustment Layers
Adjustment Layers allow us to customize a layer’s tone (such as the Brightness and the Contrast) in a non-destructive way. In our case, we can use an Adjustment Layer to turn the Module icons black and white.
First, select the container layer within the Module group. Right-click and select the Edit Content... option. Afterwards, click New Adjustment Layer and select the Black and White... option. And voila!
The last thing you need to do is reword the headings and the text within the content placeholders. With that done, here it is, our finished prototype:
Well done, we have successfully built a design prototype for a web page. We used Velositey, allowing us to generate the bare layout quickly. Furthermore, we customized the layers with colors, gradients, and adjustments in a non-destructive way, keeping their initial form intact and allowing for future edits.
Do you have any other tips and tricks for using Velositey? Let us know in the comments!