Website Design Progress – The Overall Web Design

Computer, design, Digital Art, Photoshop, web design, Website Design

Here’s my design process for my website. I used Photoshop to create the various assets and components. I started by creating a 1280 x 1024 canvas and applied a grid and template to the document that I downloaded.

Screen Shot 2014-12-12 at 09.42.29

I organised the drafts into one folder and added a centre grid line by dragging one from the ruler on the side. (To show the rulers, press cmd + r/Ctrl + r)

I moved onto my background graphics and created a new folder to put all of my background related elements in it. The visuals that I wanted were night time themed with clouds, so I filled the background with a navy blue and added a gradient to the top and bottom. I used one of the template brushes and edited in custom brush mode to make it resemble tiny stars. Then, on a new layer, I painted some stars in white at the top.

Screen Shot 2014-12-12 at 09.58.39

Then, using the draft layers as a rough outline as to where my header and body went, I created a new layer for my clouds.

Using the circle tool, I drew a row of circles to act as the outline for my clouds.

Screen Shot 2014-12-12 at 10.05.34

I then merged the layers, rasterized them and renamed them “clouds”. I then selected the area underneath the clouds and filled it in white with the bucket tool, making sure that the selection was tight-knit and didn’t have any gaps.

Because the outline looked a little to harsh and crisp for clouds, I went to FilterBlurGaussian Blur and adjusted the blur so that the outline looked softer. Lastly, I added a straight gradient to the end of the clouds, making sure that it was completely horizontal by holding down Shift when drawing it so that the bottom of the clouds would completely fade out into a navy blue.

Screen Shot 2014-12-12 at 10.13.58

I then wanted to create a tile for my clouds that would run horizontally so that it could go on continuously on the webpage no matter how much you zoomed in or out. This was more for my website coding that I will be starting after the new year. It was very difficult to make accurately, but after many attempts I managed to get it to work.

Using the Rectangular Marquee Tool I selected an area of the clouds that finished neatly at both ends and cut and pasted it onto a new layer. I had to make sure that the end of one side would run smoothly into the beginning of the other side when it looped, so it took me a while to do it right.

I used the arrow keys to move the new layer around accurately, fitting it next to the original layer. To match it up properly, the gradients at the bottom of both layers had to be seamless.

Screen Shot 2014-12-12 at 10.27.30

Once I was happy that the tiles worked, I kept the tile layers separate so that I could use it when creating my actual website.

I then moved onto creating the header. Since the header section has already been sectioned out by the clouds, all I did was add the title and logo.

Screen Shot 2014-12-12 at 11.20.04

For the menu text, I created both the normal text as well as the text when the cursor hovers over it.

Screen Shot 2014-12-12 at 11.43.12

Screen Shot 2014-12-12 at 11.48.11

Finally I added footer text to credit the art and copyright.

Every page will have this over-arching page design in it to create a sense of consistency and to distinguish my style.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s