post icon

Easy (and Complete!) Website Design in Photoshop

“If you want something done right, do it yourself” – cliche, maybe, but often very true. It’s only when you can place your own ideas into a complete project, see your vision come to life in front of you, that you’re truly happy with the final effect. No one else has your ideas or thoughts about how something should look.
This totally applies to web design.
More and more people are turning to websites for their business and personal pursuits, whether to sell products and services or to keep in touch with distant loved ones. The cost of hiring someone to design a professional website for you, though, can be frightening. Even more frightening can be the prospect of tackling it on your own.
Using Photoshop, you can create your own website with very little headache. Seriously. I’ve been designing websites professionally for more than 6 years now, and constantly find myself surprised by how much fun it is to do. Taking a simple graphic and transforming it into something people can navigate through is akin to magic.
What will you need? To follow this guide word-for-word, you’ll need Photoshop CS or CS2. Don’t let that stop you if you don’t have these programs, though – any graphic program with tools comparable to Photoshop will let you create the web design. You may have to look around for the right tools, though. Attached to this article are a series of images that illustrate the process more clearly.

Part One: Gather Resources
The website design we’re going to create will be similar to the first illustration attached to this article. To get going, you need only one thing (other than your software) – an image or graphic that you want to feature in the header of your site. I’ll be using an image that I picked up on ClanTemplates.com in their Renders gallery.

Part Two: Block it Out
Before we do anything else, we need to make a “sketch” of where we want to place the parts of our site.
1: Open a new canvas (File, New) sized about 550 x 500 pixels. It should be RGB color with a white background.
2: Set your foreground color to black. Using your rounded rectangle shape tool, create several “blocks” to match the general layout shown in Illustration 2. Make sure that you use the shape tool, not a marquee. When each block is made, right-click the layer and choose “Rasterize Layer”.

Part Three: The Header
We’ve got each of the sections of our website decided and indicated. Now, we need to fill in those spaces and make them look nice. We’re going to start from the top (literally) to make it easy.
1: We’re first going to turn the header block into metal. Set your foreground color to #fdfdfb and your background color to #a2abb2. Then, select your header block layer. Click Layer – Layer Style – Gradient Overlay. Apply the white-to-gray gradient. Within the layer styles dialogue, click “Stroke” and apply a 1-pixel stroke in #a2abb2. Click OK.
2: Right-click your header block layer and choose “Copy Layer Style”. We can now paste that layer style to other shapes – right-click both your middle and bottom layers and choose “Paste Layer Style”. This will put the gradient and stroke on each of your blocks. (See Illustration 03). And yes, I realize this has little to do with the header – but it will save you time later.
3: Now, we’re going to create two metal rivets at each top corner of the header. Use your elliptical (circle) shape tool to draw a small circle in each top corner. Right-click and rasterizing the circles. Then, right-click and paste the layer style to each circle. (See Illustration 04).
4: One more metal-looking accent and we’re ready to add our graphic. Create a new layer (Layer, New, New Layer). Using white, draw a thin line over the lower 1/3 of the header block. Right-click to rasterizing the shape. Then, lower the Fill of this line to 20%.
5: Our last step to the header – add our graphic and text. I’ve spent some extra time with my graphic, adding some background in using a gradient and brushes. This isn’t necessary. To make the graphic match the rounded corners, place it over your header block. Then, select the outside of your header block. With this selection made, click Select, choose Modify, and click Contract. Set the amount to about 15 pixels and click OK. Then, hit the backspace key on your keyboard. Finally, add text. I achieved the text effect by pasting my layer style and changing the color from gray to green. (See Illustration 05).

Part Four: The Navigation
Easy so far? Great – because it’s not going to get harder … it gets easier. Now we get to make our navigation buttons.
1: Use your rectangle marquee tool to create breaks in your navigation block – select an area and hit the backspace key on your keyboard to erase it. Move the marquee over and erase the next space. (See Illustration 06).
2: Now we’re going to carry the idea of metal rivets through our navigation. To do this, select one of your metal rivet layers and right-click. Choose “Duplicate Layer”. Then, move the rivet into the upper left corner of one of your navigation buttons. Repeat this for each button.
3: Use the same font you used in your header for text on the navigation buttons. I chose a dark color to make it stand out. (See Illustration 07).

Part Five: The Body
This is the easiest part of all. To create the body, just use white to draw a rectangle over your bottom block. Right-click and rasterizing the rectangle. Then, add a 1-pixel gray stroke (Layer, Layer Style, Stroke). Done!

November 9, 2017
  • Comments Off on Easy (and Complete!) Website Design in Photoshop
  • TWEET THIS