Templates by BIGtheme NET
Home / Basics / Photoshop Tutorials: Makeup Distinct Web Buttons Items

Photoshop Tutorials: Makeup Distinct Web Buttons Items

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.

Make New Document for Download Button from New Doc Window. Image © reserved 2015 Photoshop Helps.com

The download button sheet will seem on your front screen as below picture.

Makeup Distinct Web Buttons Items sheet for downoad. Image © reserved 2015 Photoshop Helps.com

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.

Layer Styles Inner Shadow window for Download Button. Image © reserved 2015 Photoshop Helps.com

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.

Write text on the Download Button with Type Tool. Image © reserved 2015 Photoshop Helps.com

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.

Plot the Square Box on the right side of Download Button. Image © reserved 2015 Photoshop Helps.com

Now select the downward direction arrow shape from Customs Shape Tool.

Select the Arrow Figure from the Custom Shape box for Button. Image © reserved 2015 Photoshop Helps.com

Plot the downward direction arrow with Fill and Stroke white color.

Plot the Arrow in downward direction on the download button. Image © reserved 2015 Photoshop Helps.com

Currently, our Download Button has completed just save it as PNG format into your computer.

Our final results of a beautiful Download Button. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

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.

New Document window set the Properties for Search Icon. Image © reserved 2015 Photoshop Helps.com

The search icon simple sheet will seem as in the below picture.

First look of New Transparent Sheet for Search Icon. Image © reserved 2015 Photoshop Helps.com

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.

Plot a Round Shape on the Sheet for search Icon. Image © reserved 2015 Photoshop Helps.com

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.

Option of Inner Shadow from layer Styles for the Search Icon. Image © reserved 2015 Photoshop Helps.com

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.

Set the Layer Styles Properties of Inner Shadow in window. Image © reserved 2015 Photoshop Helps.com

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.

Look of Search Icon with Inner Shadow Layer Styles. Image © reserved 2015 Photoshop Helps.com

Select the search icon figure from Custom Shape Toolbox. Set Fill and Stroke White color and draw on the sheet.

From Custom Shapes Plot a Search Figure on Search Icon. Image © reserved 2015 Photoshop Helps.com

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.

Finally we have made a Search Icon, this is final results. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

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.

Set Properties in New Document window for Cart Button. Image © reserved 2015 Photoshop Helps.com

You will see the New Transparent sheet in Photoshop window as like below image.

The New Document will appear like Transparent Sheet for Cart Button. Image © reserved 2015 Photoshop Helps.com

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.  

Plot a Round Shape with Ellipse Tool on the New Sheet. Image © reserved 2015 Photoshop Helps.com

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.

Blending Option from the list of Add Layer Styles. Image © reserved 2015 Photoshop Helps.com

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.

From the Layer Styles window select the Web Styles. Image © reserved 2015 Photoshop Helps.com

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

http://www.photoshophelps.com/2015/08/04/learn-photoshop-layer-styles-load-step-by-step/.

Pick up the Red Gel Style from the layer Styles window. Image © reserved 2015 Photoshop Helps.com

Now add a diagram of Cart from Custom Shape Tool with Fill and Stroke color White.

Pick up the Cart Figure and plot it into Cart Button. Image © reserved 2015 Photoshop Helps.com

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.

Finally we have designed our require Card Button. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

Conclusion

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 .

About Ali Imran

Howdy! I’m + Ali Imran and CEO of Photoshophelps.com. I have passed BS Computer Science degree in the year of 2013. I’ve a great experience in Content Writing, Photoshop, Graphics Designing, SEO, Web Developing and Web Designing.

Leave a Reply

Your email address will not be published.