Creating Web Elements Kit in Photoshop
In this tutorial we’re going to craft our own Web Elements kit. In human language this means we’re going to create 1 single document in Photoshop which includes all sorts of shapes and elements you could use in future design projects.
An important aspect of this is that all the elements are highly customizable without losing any quality.
In order to get a crisp UI, every shape we’re going to create must be “pixel perfect”. That term implies that all shapes are placed right on top of a pixel, since Photoshop often uses half pixels (which is actually a full one with a duller color) which is great for drawing and photo editing.
All elements are free to be used in your own projects, just remember others might have seen this tutorial too. So try giving this tutorial your own twist once you’ve mastered the techniques.
Create a 1000 x 1000px document with 72 dpi (web standard). It might be slightly too big for now, but we can crop later on.
Set the background color to #383e44. Fill a new layer with #7a7a7a and Apply noise on it:
Filter > Noise > Add noise…
Then set the layer blend mode to “Luminosity” and set the Opacity to 10%
You should end up with a noisy texture such as this:
We’re going to create the background pattern in this step.
Create a new document of 45 x 45 px and pick the Pencil Tool. Set the size to 1px and draw a pattern like this:
The dashes are each 2px long with 1px gaps. Zoom in to be precize!
When that’s done, go to Edit > Define Pattern… and give it a name.
Now go back to your first document and create a new white layer. Double click it to access the Layer Styles and check Pattern Overlay. Click the thumbnail to access the patterns you have and pick the latest one we created. Set the Blending mode of it to Overlay and the Scale to 69%.
Also set the Layer its own Blending Mode to Overlay and finally put the layers Opacity to 10%.
It’s a really subtle grid we’ve got here, but this little detail will lift your background to a pleasing level rather than a boring and plain one.
Now the background is finished, we should make it as easy as possible to create and edit or elements.
Therefore we’re going to Lock all the background layers so we can easily select the elements we’re going to craft. You can do this by selecting the layers and clicking the small Lock icon in the layer panel.
The Layer structure we’re going to use is quite uncommon. Usually you’d make a layer group for each element; But because we’re going to make all our elements easy to edit colorwise, we need to arrange multiple elements in 1 group so they’re not scattered over different groups.
Our goal is to have 1 color layer that will enable us to change all the colors equally in a few clicks.
To start with, we’re going to make some basic buttons. First we need to create 2 seperate Layer Groups. The upper one is called “Above color” and the second one “Colored elements”.
Right now we’re just going to work inside the “Colored elements” group. So get a new layer inside it and pick the Rounded Rectangle Tool.
At the top settings bar you see a small arrow next to all the different shapes click it and use these settings (make sure snap to pixels is on and also add px after the sizes).
We’re using this “snap to pixels” to get our buttons crisp and clean just as they would/will be when they’re pure code.
Click anywhere in the document to place the shape. Then we’re going to add Layer Styles. We used blue instead of grey to set our color intesity, just because it appears to be less hard when all filters are applied.
It is very important to set the Fill to 0% for these colored elements!
It might be useful to make style presets of these, which can easily be done by clicking “New Style…” within the Layer Styles window.
Now duplicate this layer twice and place these 2 new buttons next to each other (so you will end up with 3 buttons). We’re going to change the layer styles for these 2 (make sure the fill is 0 again):
Button 2 will be exactly the same, just give it a bigger Inner Glow:
Button 3 is also the same as the first one, but check the Reverse button in the Gradient Overlay
You should end up with 3 buttons that look like this:
Don’t be upset by the glow on button 2 yet, it will be more subtle when the color is added later on in this tutorial.
We also need to add some text on these buttons, do that in the “Above color” group.
Type in the center of the button and just duplicate it to the other buttons. For the last one, change the drop shadow direction to -90°
Our buttons are “ready” at this point. Personally I like to use the button size as layer title, this might make things easier when you are using them in future projects.
Also it is really important to know how you resize your buttons. It’s not just pressing V and dragging… You need to pick the Direct Selection Tool (A) and select the 4 anchor points you need and drag those to the place you want.
But if you used the original dimensions as layer title, it might be just faster to draw a new shape where you added some pixels to the original dimensions.
Look at the difference in resizing with the Transform Tool(bottom) and Direct Selection Tool(top):
Now we’re going to make some similar Call To Action buttons.
Draw a Rounded Rectangle in the “Colored items” Group, with these settings:
Duplicate (cmd/ctrl+J) the shape twice and position them next to eachother. If you made some style presets of the 3 buttons we created earlier, you can apply these 3 styles on these buttons, otherwise apply the same settings from step 3 manually.
Also the text will remain the same when it comes to color and drop shadow. Make sure they’re in the “Above color” group. The size is different though:
You could stop with this button, feeling like it is “call to action enough”, but in my opinion it needs more focus compared to the others.
We’re going to draw some pressed rectangles beneath these buttons. To do that we need another Layer Group. So create one called Call to Action or CtA and make sure it is NOT within one of the 2 groups we already have, drag it below those 2!
Now comes the little mathematic part, don’t worry, it’s not complicated.
We just had those 180 x 30px rectangles, but we want them to be equally bigger on all 4 sides. Unfortunately this doesn’t work when you duplicate the layer and drag outwards holding Alt. That would make the sides too big and the top and bottom too small.
So we’re going to use the advantage we have by just adding 10px on each side. That makes a rectangle of 200 x 50px with a border radius of 25.
Make it central to the other button (you can use guides to define the center of the first button to fit the new rectangle perfectly). Apply these layer styles:
Now duplicate this rectangle and place them behind the other 2 buttons
Next up are some Buy buttons. Those will be quite similar to the Call to Action buttons, because you want people to click it of course.
Take the Ellipse Tool and open the small settings menu again. Use these settings:
Once again we’re going to duplicate the button twice to get the rollover and pressed state of it. Use exactly the same 3 layer styles we made again.
But the text also needs to be changed again in order to fit with the button. I wrote “BUY” on it with these settings:
We’re also going to add this pressed circle behind the button, just like we did with the previous buttons. That means in a new layer group below all the other groups (but above the background obviously). Make them 120 x 120 px, set the color to #383d43 and use these effects:
Next up is a Tabbed Menu. Because we’re not going to make this as colorful as the other elements, we can keep all our layers in one Layer Group.
So create a new group called “Tabs”, place it below the other ones. Now pick the Rounded Rectangle Tool and set the radius to 5 and the dimensions to 300 x 30 px (don’t forget the px behind each value).
Apply these layer styles to the shape:
Now pick the Rectangle Tool (NOT rounded!) and do the math again, we want 3 tabs, so if we select the center one we need a rectangle of 100 x 30 px. Place it in the center using guides.
In this step it is very important to stick with the values we provided, so the colors of highlights match corectly. If you already tried your own thing with it, feel free to adjust the colors manually or make the rectangle 2px less high so it doesn’t affect the highlights.
For the ones who followed everything nice and strict, use these layer styles:
Now add some white text on top of these tabs in Myriad Pro again with a size of 13pt, use the same Drop Shadow as we did all the time and change the direction to -90° for the center piece.
Create a new Layer Group called “Sliders”.
Pick the Rounded Rectangle Tool and use these settings and use the color #383e45:
Now duplicate this 3 times so we end up with 4 bars.
Now pick the Ellipse Tool and set it to 12 x 12 px size. Draw 1 circle on the 2 first bars so we end up with a slider feel.
Then add these layer style to the first one
For the second one use the Style we made for the regular button in the beginning, make sure the layer fill is 0%
Now we also are going to make some precize sliders which have a sharp end.
Draw a small Rounded Rectangle with these settings:
With the object still selected, place a guideline right in the middle, then pick the Direct Selection Tool and click on the thin white line that surrounds the object which represents the Path of it.
At the bottom we have 2 Anchor points defining the curve of each corner. Pick the one most to the center and move it downwards while making it snap to the guide.Do the same for the other one and make sure the Anchor Points are on the exact same place.
Make sure you don’t move the Anchor Points too low, the points on the images below are positioned as explained, but too low! Ideally it would be 5px lower than the original shape, which is half of the height.
Now apply the 2 different Layer Styles (light grey and blue with 0% FILL!) we made for the round sliders.
Because this precize slider needs to be pointing on exact places, we might want to add some sort of ruler to the bar.
To do this we’re going to use the Pencil Tool (hidden under the Brush Tool). Set the hardness to 100% and the size to 1px.
Then zoom all the way in on the 3rd bar we made set the color to #a0a0a0 or brighter. Draw a single vertical line of just 2 pixels high from the bottom.
Move this all the way to the corner of the bar and duplicate it, then move it 10 pixels by holding Shift and using the arrow keys.Then duplicate these to place them on the 4th bar also.
Next up is a loading bar / progress bar with a percentage indicator. Make this in a new Layer Group below the rest.
Pick the Rounded Rectangle Tool and use these settings, but first set the color to #383e45:
Apply the same Layer Style we used for the slider bar bases.
Draw a new Rounded Rectangle with a width of 500 px (or read along and do some math first) and a height of 10. Place it inside the other and apply the Layer Style we used for or first buttons in this tutorial. Make sure the layer Fill is 0% and you might want to disable the Inner Glow. Also place just this layer in the Colored Items group.
We’re going to do some simple math again.
Since 500 pixels = 100%, 5 pixels = 1%. So if you want a bar of 85% you should do 85*5 = 425 px. So the inner bar should be 425×10 px now or any other percentage you prefer.
We want to create a percentage indicator, use these settings for the Rounded Rectangle:
Now comes a tricky part, we want the element to remain as a path that can be resized at all times and with as many anchor points as needed.
Turn the shape we just created 45°. Then add guides to the center:
Then pick the Rectangle Tool and select “Add to shape area”
Draw a Rectangle starting from the guides crossing point and make it look somewhat like this: (make sure to hold Shift)
After that put the shape back to its original angle (0°) and apply these Layer Styles:
Finally add some white text with the Sharp anti-aliasing on and 10pt size.
Next elements are some switches which could represent ON and OFF or YES and NO, or anything else that has 2 options.
Create a layer group called Switches. Inside of that create a Rounded Rectangle with these settings, but first set the color to #383e45:
Apply the same layer styles as we did for the Slider base in Step 8.
On a new layer, place a circle with the Ellipse Tool with a size of 16×16 px. Place this inside the base and apply the Style we have for the silver slider nob we made in Step 8.
Now duplicate both the base and the circle, but place the circle in the “Above color” group and the base in the “Colored items” group. Make sure the fill of the base is set to 0%.
Now create yet another Layer Group below the other ones and call it “Radio Buttons”
Pick the Ellipse Tool and draw a circle of 20×20 px, apply these Layer Stles:
On top of that, draw a circle of 12×12 px. Then duplicate both layers so we end up with 2 radio buttons. Apply the dark blue and the silver stylewe had for the slider nobs.
Draw a Rounded Rectangle of 20×20 px with a Radius of 2 px. Apply the same Layer Style as we did for the radio button bases.
The next step is hard to explain, we want to draw a Checkmark and want to do this with the Pen Tool. Try copying this shape or find a free resource on the internet.
This is the last step before the magic of color will happen.
It will be a dropdown menu. So create a new Layer Group called Dropdown. Inside of this create another group called “Standard” or “Normal”.
Inside of this group, draw a Rounded Rectangle with these settings:
Apply the same Layer Style we used for our Tab menu (unpressed state).
Now pick the Pencil Tool and make sure the size is 1px, then draw a vertical line in black at the right half of the base (look at the image below for better refference). Next to it draw a white one with the same size, then set the layer opacity to 12%
Take the Custom Shape Tool and make sure you can see all shapes (the little button with a triangle at the right allows you to do this).
Get the triangle shape with sharp corners out of there and rotate it 90°
Place it to the right of the seperator we made and apply these Layer Styles, but first set the color to #383e45:
Finally add some white Myriad Pro text of 13pt size on it. Add a Drop Shadow with an angle of 90°
We are not going to stop with just this “dropdown”, since it is not dropped down yet.
So duplicate the “Standard” group (by dragging it on the new layer icon” and rename it to “Open”.
All colors should be the other way around now. So the Drop shadow is white, the Inner shadow is black and the gradient should be reversed. Also the triangle should be turned around 90°
For the dropdown itself we want to calculate how many items we want, so lets say we want 3 items, we need to get 4x the actual size of the button, so we can place it behind the button.
So we need to make a Rounded Rectangle with the size of 140×112 px with the color #35393e
Apply a 1px sized Stroke on it with the color #25282b.
We want the items to be more seperate, so we’re going to change the color of every 2nd item. Set you color to #3f444a and draw a Rectangle (not rounded) of 140 x 28 and place it in the middle of the dropdown.
As you can see, it doesn’t look so good and maybe even “dull”. So we’re going to add a line, pick the Pencil Tool and set the color to #51575f. Zoom all the way in and draw a line where you fill 2 pixels and skip one, then 2 pixels again, skip one…
Now place some centered text on it again with the same settings as we’ve been using before (Myriad Pro 13pt + drop shadow).
Now we want to modify the mouseover version of this. Just duplicate the layer group of the Open version and apply the blue button style we made for our first buttons to the Middle/2nd item layer. Remove all the individual Layer Styles except the Inner Shadow and the Gradient.
Here comes the fun part, we’re going to do few effort and get much result.
Right below the Colored Items group and above the other groups we made, place a new layer. Fill it with #51575f.
If everything previously in this tutorial was done correctly, you should have some nice colored buttons, but the bases and background disappeared.
Now we could go for the long and manual way, or the fast and more automated way. Make sure you saved your file though, because Photoshop could crash (at any time actually). Then duplicate the Colored items group and merge the group to a layer (right click, last option).
It might look finished when disabling the blue layer we made, but it isn’t. Ctrl/Cmd + click the thumbnail of the merged group layer so all the items get selected. Click on the blue layer so it is active. Then click the small “Add layer mask…” icon at the bottom of the Layer Panel. And finally make the duplicated group invisible (important)
The items should now be blue as you expect them to be. Check your document for any blue bits that shouldn’t be there, in that case you made an error.
You can play around with a color overlay on the blue layer. Remember that you can easily remove the layer mask at any time (right click the thumbnail) and make a new one. That is in case you move the items or create new ones.
That’s it! You can now easily crop the document to any element you need and copy them into other documents. Try making different documents with other styles so you end up with a nice library of elements.