re-creating-scrapblog-banner-photoshop-graphic-design-tutorial-1

Re-Creating Scrapblog Banner – Photoshop Graphic Design Tutorial 1


In Category:
Intermediate Photoshop Tutorials


Well, today for this Photoshop tutorial I decided to try something unusual and to re-create one of the greatest website sign-up banners just to show people how Web 2.0 is approached, and what are the main styles used in it.

last.jpg

Well, the first step is quite simple.  From the tools, select the rounded-shape rectangle, and use the hex color printed below.

step2.jpg

Now just to make this look a little more official, copy the text printed on the original banner into yours, just like I did.

step-3.jpg

This is where it might get a little confusing, but I am pretty sure that most of you guys will get it. Draw out a circle close to the size of the button.  Take a look below to see exactly what I mean.

step-4.jpg

If you got that, the rest should be easy.  Now duplicate the circle, and move it to the right.  Connect these two circles by filling a rectangle in the middle.  Take a look below to see exactly what I mean.

step5.jpg

Almost done.  We just have to fill it up with some gradients, and bring it to life.  So here is what we do:  Below is the gradient setup with the colors.  Go to your Layer Settings, and apply those colors to your gradient overlay.

step5.jpg

You’re basically done with the base of the button.  Now we need to get the go button inside done. Create a white circle inside the button.

8thstep.jpg

Apply the same gradient overlay style used in the main button, except set it to Reverse.  The results can be seen below.

9thstep.jpg

Use the same font and the color hex from step two to create the Get Started text.  Apply these Drop Shadow settings to that text.

12thstep.jpg

Well, we are finally here.  You can now just add the stroke, and you are all done.  This is actually the second-last step since I forgot to add the text below the button.

strokesetting.jpg

Now that you have copied the text for the final step, you are all done.  Take a look at my final result below, and there is a copy in the previous image as well.

last.jpg

Thank you for reading my tutorial, and I hope that you have learned something new!


This Photoshop Tutor tutorial has been tagged with: , , ,

Disclaimer | Privacy Policy