We have a number of web UI sets available to our members and customers, and using them in your own web design work is a snap. To demonstrate how easy it is, we’ll take a header element from the Retro UI Set and add it to a new PSD file that would be used for designing a website.
To start with, download the free fonts used in this PSD file so that you will be able to edit the text without having the missing font replaced by another font: Bebas Neue, Deftone Stylus, and Amperzand.
Next, download the Retro UI Set. The UI set has a number of different elements and adding any of them to your own designs is easy. The UI set has a nice header that we’ll be working with. In this example we’ll be moving the header graphic to a new PSD file. Doing this will accomplish a few things:
- All of the layers will be retained, so it can be easily edited
- Moving it to the new file will remove it from all of the other elements in the UI set, and we can move it we ever we want and use it in our own design.
So with the vp-retro-web-ui.psd file open, in the layers palette find the group called “Menu 1”.
Click on the Menu 1 group to highlight it in the layers palette and then go to Layer > Duplicate Group. You’ll see an options box like this:
By default it will prompt you to duplicate the group in the same PSD file, but we want to change that. In the drop down where it says “vp-retro-web-ui.psd” select “New”. And then type in a name for your file.
Once you click “ok” Photoshop will create a new file that contains the duplicated elements.
We can now work with this element to customize it to suit our specific needs. We’ll add a new layer (Layer > New) called “Background” and place it behind the Menu 1 group.
We’ll use the paintbucket tool to give the background layer some color. Next, select the Menu 1 group in the layers palette and go to Edit > Free Transform. This will allow you to move the element into place wherever you want it in the document. When you have it where you want, hit enter.
Now, let’s change the text. Open the Menu 1 group in the layers palette, select the type tool and select the first text layer, which is the phone number.
Highlight the text.
Change it to your own phone number.
You can follow the same process to change any of the other text that needs to be customized. You can also change other things, like colors. Let’s say you want to change the color of the blue badge in the center of the header. In the “badge” group/folder, find the layer titled “container”.
Double click on that layer in the layers platte to bring up the layer style options. This layer is using a color overlay to give it the blue color, so all you need to do is change the color overlay to another color. For example, changing the overlay to black will make the badge black.
You can follow essentially the same steps to edit other UI elements as well. Some will use gradient overlays instead of color overlays, but making the customizations follow the same process.
In this situation we added the Menu element to a new file, but if you wan to add a UI element to an existing PSD file that is easy too. For example, say you have a web design in a PSD file and you want to add one of the buttons from the UI set, The only difference is when you are duplicating the group, instead of choosing “New” file in the dropdown, choose the name of the file that you want to add it to (the file will have to be open in Photoshop in order to be able to select it).
That’s it! If you have other questions please email us at firstname.lastname@example.org.