Use PS plugin Velositey quickly to finish the Web page prototype design

Note: The Velositey used in the tutorial is an earlier version, with the current version of 1.1, slightly different from the interface shown in the tutorial, but basically consistent, but more powerful.

　Common layout styles

Before really starting to study Velositey, let's start by simply warming up the common layout style. Take ThemeForest's most popular three wordpress themes (Avada, enfold and salient) as examples, and you'll find that they have a lot in common.

First of all, on the big screen you will find that they put the site logo on the left-hand side of the navigation bar, the navigation bar has a large banner, and multiple banner will scroll. The layout of the entire Web page is marked by a clear trace of the design of the grid system.

This layout is so popular that you will find that you are often doing similar things, obviously it is repetitive work!

In this tutorial, we'll look at the features of Velositey and learn how to get Velositey to automate tasks quickly and speed up prototyping. In addition, we will use the original function of PS for the prototype to make appropriate adjustments.

Gossip less, let's get started!

Setting up and preparing for work

As a PS plug-in, Velositey for the previous version of PS support is not good, currently launched separately for the CS6 and CC two versions, installed on the premise of the installation of Adobe Extension Manager. When you install, you can place the Velositey folder in the compressed package in the Panels folder in Photoshop's Plug-ins, or use the Adobe Extension Manager to install it.

When you use, in the PS menu click on the window-> expand->velositey, you can open the Velositey interface.

Basic layout

Let's start by creating a new document.

New Document

First, we need to click on the [+] new Template button to create a new blank document. Document with grid, the total width of 1170px, the interval of 30px, convenient for you to design the site.

Add header

below the [+] New Template button, you can see a series of tabs, one of which is header. When I click one of these, Velositey automatically generates headers in the document.

In this case, the header style we use is the logo on the left and the navigation on the right. In the layers panel, you can see that all the layer in the header is placed in the folder, and you can name it according to your requirements.

Note: If you subsequently choose a different header,velositey will help you replace it.

　　Add Slider Area (Slider section)

Although large size banner and slider areas are flawed, many sites still opt to retain the area. There are many styles built into the Velositey, adding slider area is as easy as adding headers, click Select.

In the case, we chose the last slider style, so we generated a slider area that contained the title, content, and two buttons.

As shown in the figure above, you can see the layer groupings in the slider area in the Layers panel.

　Add Content Area

Adding content areas is just as easy. The Third tab in Velositey is the content area.

I chose the third style and added three columns after clicking, each containing the title, picture, and prefabricated content.

　　Add more Modules

In Velositey, each module is equivalent to a separate piece of content. Its contents and uses are decided by the designer. Unlike header and slider areas, we can add multiple modules to the document.

In the case, we added the first module, which contains a picture, title, and prefabricated text that spans the entire grid.

Add footer

Usually the bottom of the page will add footer, similarly, Velositey for us to have some optional footer:

At this stage, we have completed the necessary parts of the web design, from header to footer, only need a few clicks on it. For a better layout, you can also add a reasonable gap like this:

Now that we have finished the basic layout, we can then customize it to make it look more like a high-fidelity prototype.

Detail adjustment

As we personalize the document, it is essential to ensure that the integrity of each layer is fundamental. Each layer cannot be modified as it is adjusted to ensure the scalability of the prototype. In this way, we need to use the following features of PS:

Smart objects and Smart link objects

Adjust Layers

Layer effect

In addition, I personally prefer to use as few layers as possible.

Using Smart Objects

It is necessary to adjust the logo to a smart object when placing it.

First, you need to find the layer named logo in the header group, right-click it and convert it to a smart object.

To place the logo in this layer, we right-click on the layer and choose Edit content.

This time, we will open a new document in PSB format in PS, the original PSD in this rectangle's smart object will become a transparent layer, we will be ready to put the logo in the PSB document, left-aligned, this time if you save the PSB document, the original PSD document will be synchronized changes.

At this point, we can easily change the logo smart object layer, adjust. For more efficient use, we can right-click on this layer and select "Convert to link ..." option.

Later, PS will remind you to save the Smart object file in PSB format. As an important part of the website image system, this logo will be used by you. In general, we will save it to a folder named "Image."

"Try to place pictures and icons in a folder near the PSD instead of a folder named others on the desktop." "--ps Etiquette Book

You have edited the logo's smart object in header, and it can also be reused in footer. Locate the logo layer in the footer group, right-click on it, and select replace content.

This time open you to save that. PSB file folder, select the logo, then the bottom need to use the location of the logo is also done.

The way other places are handled is similar.

Working with layer effects

Adjust layer effect Presumably everyone is already very familiar with it. In the case, we use a layer effect to paint the button and add a gradient. The specific operation here is not to repeat.

Repeat these steps, and here is the detail of the design that you need to polish carefully. They make your pages more readable, more visually expressive, and so on.

Using adjustment layers

Adjusting the layer's presence allows the designer to customize the layer's hue (brightness, contrast, etc.) in a non-destructive manner. In the case, we can change the icon in the module to black and white. In the module group to find the corresponding layer, right click, select the "Edit Content" option, then click "New Adjustment Layer" and then choose black and white effect is good.

Final product

Finally, replace the prefabricated text content (title, text) with what you need, and the prototype will be a finished product!

Conclusion

Take a closer look at the Velositey, and you'll find that using good tools can really work. Whether you are using PS, ai or enthusiastic sketch, these systematic design platforms have a lot of use skills and development tools, leisure time a little research, will definitely benefit. You tell me?

Category:

• PS Getting Started Tutorial