Lesson 6 | Photoshop CC for Web Design

The next thing I need to work on for the design process is creating a UI, or User Interface, kit. Every website has some sort of UI component to it. Whether it’s a search field, a navigational button, a bat to top link, a graph, a progress bar, social media icons, etc. Whatever the case may be, every website has UI elements. All of these elements should be consistent across the entire site. Because of this, it is recommended using a UI kit or developing your own UI kit.

If you want the full package UI you can download Flat UI that has both the HTML and CSS and, if you get the pro version, you will also get a PSD file, which you can then load up into Photoshop and start using in your designs. A great part about this, is the PSD file can be fully customized. Colors can all be changed, and then all you have to do is pass those colors on to your developer.

Icons, or another aesthetic element that every website has, whether it’s social media icons or play buttons, pause buttons or simply location pins. All of these items need to be in sort of a unified theme.

You can create these icons in Photoshop or Illustrator, and then save them out as images. The problem with this is that images are large, and they decrease the speed of a webpage because the webpage has to wait for all these images to load. Recently though, there’s been a surge of these new things called icon fonts.

I’m actually going to use this method by downloading Font Awesome icons and using those icons for my website mockup.

The first thing I need, is the portfolio slider pieces. I’ll use the Ellipse tool and hold the Shift key while a click and drag out a circle. Also use the Alt key on my PC (Option for Mac) so the circle will be directly in the center of the outside guideline to 64 x 64 pixels. I’ll give the fill a light grey and apply it before pressing Shift+Alt (Opt for Mac) and click and drag to the other end to make a copy of that circle.

For this next part, I’ll use the Cheatsheet to select and copy the icon I want to use which is the left and right chevron icons for arrows. Starting with the left chevron, I’ll use the Text tool in Photoshop and paste the icon. If it shows up as a box, just make sure that the font you’re using is Font Awesome. I’ll also make it 36 pt in font size and change the color to white. I’ll then move the icon to the center of the light grey ellipses. I’ll then go to the Layers panel and select both the chevron and ellipses to group them together using Control+G. I’ll label this group “left_btn.”

I could also copy and paste the right chevron, but I’m going to do something a little easier. I’ll just copy the group I just made using Control+J and renaming it “right_btn.” After making the copy, with this group selected in the Layers panel, I’ll rotate the icon 180 degrees by pressing Control+T then rotating the icon. I’ll then Shift+click and drag the group to the other side where I deleted the other ellipses.

Finally, I’ll add all the icons to the footer section by starting with the “Back to Top.” I’ll use the Rectangle tool to Shift+click and drag a square to fill one column in the guideline. I’ll then add an up chevron on top of that rectangle. I’ll add the final icons, the social media icons, to the bottom right corner. The icons I’ll add are Twitter, Facebook, Google+, Dribbble, and Pinterest.

The only problem with using Font Awesome is that not everyone is going to have this font on their computer, or even want to download them. So as I share these with other people, especially the PSD files, it may become problematic for these fonts to really translate. So I’m going to turn these UI elements I just created into shape layers very quickly and easily.

First thing is to convert the arrows by selecting the right arrow in the Layers panel within its Group. With that text layer selected, I’ll go to the Type menu and choose Convert to Shape. I’ll then rename this “right_arrow.”

I’ll do the same for the left arrow and the social media icons as well.

The benefit to converting these icons to shapes is I can send these to anybody regardless of whether or not they have this font. Second, I can save these shapes into my shape libraries and share them with colleagues, or use them in other projects.