Photoshop Tutor

Re-Creating Scrapblog banner design

By Michael in Tutorials

Well today i decided to try something unusual and create one of the greatest website sign-up banner just to show people how Web 2.0 is approached and what are the main styles used in it.

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

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

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

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.

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

Your 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.

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

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.

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

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

Thank you for reading my tutorial and i hope you have learned something new!

You can leave a response, or trackback from your own site.