photoshop extension:Velositey.

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.

If we take a look at three of the most popular WordPress themes in ThemeForest (Avada, Enfold, and Salient) you will notice they share some common features.

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.

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.

Header option in Velositey panel

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.

The bare layout of the header and its layer structure in the Layers panel.

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.

The options of Slider layout pattern.

Here I’ve opted for the last slider pattern which gives us a slider containing a heading, dummy content, and two buttons.

The Slider area, with corresponding layers .

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.

Content layout patterns

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.

The Content area with its layers

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:

Module patterns

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.

The module added with the layers

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.

Customization

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.

The logo is placed through a Smart Object

Now we are going to convert the logo layer, which is now a Smart Object, into aLinked 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 /images.

“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!

Final Result

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:

Conclusion

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!