People say they are a web designer, but they don’t actually a good designer because generally web designers steal or copy others graphics designs. Due to less time, they save different buttons, icons, and other online web graphics sites. Due to this they serve their minds in copy paste and don’t use it in a new creation. They don’t try to design web graphics their self. They violate internet ethics every time. So If you are newbies in graphics field and don’t know how to makeup distinct web buttons items and icons in Photoshop.
Don’t worry in this tutorial you’ll be guided all about creation of web graphics items. Read it thoroughly and workout with us step by step at the end you’ll become skillful in web graphics after reading this tutorial.
Makeup Distinct Web Buttons Items and Icons
Design a Download Button
If you have needed a unique and beautiful Download Button for your web page and you want to design your own just go to some steps in below.
Step 1: Create Button Size Document
First of all you’ve required a sheet according to the size of Download Button. So go to File -> New a fresh window will expose having lot of options correlated to button size and resolution. First Change the name of document Download Button with default name Untitled-1 and Fix Preset value as Custom. Set Width 200 Pixels and Height 50 Pixels with Resolution 72 pixels/Inches. Arrange Color Mode as RGB 8bit with Background Contents as White and do a single click on Ok button.
The download button sheet will seem on your front screen as below picture.
Now you can design it your own requirements but here I’m going to design button with my thinking. Do double-click on the layer and unlock the layer first.
Step 2: Fill Background Color and Write Text
Fill out the Background color #01a9f0 with a support of Pain Bucket Tool and provide Inner Shadow from Add Layer Style. Set the values Opacity 75%, Angle -90°, Distance 5px and Size 5px.
Add the Text on a button by Type Tool and write “Download” with Text Format Arial size 24pt. Select color White and click on Tick Icon.
Step 3: Insert Download Icon
On the right side of the button insert a square box with color #06b1f9. This part has reserved for Download Icon so add white arrow here.
Now select the downward direction arrow shape from Customs Shape Tool.
Plot the downward direction arrow with Fill and Stroke white color.
Currently, our Download Button has completed just save it as PNG format into your computer.
Design A Search Icon
For designing a Search Icon, you’ve required a new document according the size of Icon.
Step 1: Create New Document For Search Icon
First of all, go to File -> New and create a new document according to your Search Icon size. Here new window will open containing lot of options. First modify the name of the document as Search Icon with default name Untitled-1 and Preset Value as Custom. Set the Width 100 Pixels and Height 100 Pixels. Select RGB 8bit Color mode with Background Contents White.
The search icon simple sheet will seem as in the below picture.
Step 2: Make Search Icon Design
For designing a Search Icon, first make arrangement in your mind. Then implement it on the sheet. Select Round Rectangular Tool and draw it on a sheet with Fill Color #f2c13e and Stroke #f2c13e.
Now provide particular effects with a sheet, just go to add layer styles in window style section and select the option Inner Shadow from the list.
After choosing Inner Shadow, a new window will expose with options Opacity, Angel, Distance, Size and numerous more. Just set the value of these options as Opacity 30%, Angel -90°, Choke 15%, Size 20px and click on OK button.
After adding layer style, the Search Button Looks like below image. Here is a necessity to add and Search icon in the middle of the button.
Select the search icon figure from Custom Shape Toolbox. Set Fill and Stroke White color and draw on the sheet.
The Search icon has completed, after adding search symbol. Now just need to save in PNG format in your computer. So go to File -> Save and select the PNG image format and save in your computer.
Design A Cart Button
Designers deliberated that the Cart button is very difficult to design in Photoshop. But they don’t distinguish that this is very easy to design. See below each step has been clarified.
Step 1: Create Cart Button Document
First of all construct a Cart Button Document from File -> New a dialog box will be exposed. Change the Document name As Cart Button and give value Preset as Custom. Set the Width 100 Pixels and Height 100 Pixels with Resolution 72 Pixels / Inches. Select Color Mode RGB 8bit with Transparent Background Contents then click the OK button.
You will see the New Transparent sheet in Photoshop window as like below image.
Now you can design your cart button on this sheet. See in below step where you have been clarified.
Step 2: Design Cart Button In Photoshop
You’ve formed require sheet now it’s time to design it. First of all pick Ellipse Tool and draw the circle shape on a sheet with Fill and Stroke color #e40002.
Give some special effects of rounding diagram. For this purpose go to Add Layer Style in the layer window, a list will open enclosing lot of option, select Blending Option from this list.
After picking Blending Option, one extra Window will open containing. Select here Styles which is a first option in this window and click on Setting icon from the right side. A massive list will appear in front of you, just select Web Styles which will see the last of the list.
Styles will appear in this same window, select the one style Red Gel from these. Checked the Stroke option and uncheck Drop Shadow as well Outer Glow then click OK to implement the style.
If you want more or unique layer styles in your Photoshop so see this
Now add a diagram of Cart from Custom Shape Tool with Fill and Stroke color White.
Your Cart Button is ready now just save it in PNG image format in your computer.
Enjoy this tutorial and do drill step by step, you’ll be talented soon to design beautiful Web Buttons and Icons by this single tutorial.
In this above tutorial, we have deliberated all about web graphics, icons and Buttons. First of all we designed Download Button then Search Icon and at the last Cart Button. Download Button has designed in rectangular shape, Search Icon is in Square shape and Cart Button is in Round Shape. Enjoy this tutorial and try it at your end after following my instructions. I’m sure you’ll implement these all buttons easily .