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.
Well, the first step is quite 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 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.
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.
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.
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 second-last step since I forgot to add the text below the button.
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.
Thank you for reading my tutorial, and I hope that you have learned something new!
This Photoshop Tutor tutorial has been tagged with: drawing tutorial, Photoshop design tutorials, web design, web design image