photoshop practices, website drafts and stages

As you can see below here are my various photoshop practices and draft webpages in order they were created. I think this shows really well the whole process I had to go though to end up with the finished ancillary task, which will be uploaded seperately, to let it bask in it's full glory. As you may be able to tell I am very proud of the website and it's quality. This is especially so because I had had no experience of doing this in any form before and used several programs I wouldn't have dreamed using before and had no idea how to use. Most apparent of these was Adobe Photoshop (version CS4). Below the writing peices talk about WHAT I have done, not WHY I have done it, that will be in with the final version of the website which I will put up later.

Right the five images above were created in Photoshop, originally for use on iWeb. However during creating these it quickly became obvious that iWeb had less features compared to Photoshop and would not produce as good as site as Photoshop could. Because of this I decided to not use iWeb and just use Photoshop for both the basis and creation of the features of the website. This mean't that my job would be harder and more time consuming but the reward would be greater. Just doing the background prooved my decision to be correct. Several of the steps for the background are below. The first step is not here but the it was just a plain grey image.

The image above was created by adding a effect to a plain grey image. I cannot remember what the effect was called but it is one of the default effects available. I think it may be simply called mistify or something similar. For the image below I just darkened it.

To make the image below I added another effect to the image above. Also at this point I made it wider as it needed to be. This was the last 'pre-packaged' effect I used. Everything else I made from complete scratch.

For the image below I lightened the basis of the background from that above. Then all I did for the two images below was select the paint option, chose suitable colours and various brush sizes and painted over the top of it. Then I changed the transparency for each for the correct feel. Some as I am sure you can tell are more 'see through' than others. For the bit in the bottom right corner I found a 'light effect' and fiddled around with the options for that until ultimately it was like how it is here. I changed all sorts of things including where it was on the page, the size, the amount of shadow and light. The light bit here is completely 'white light', whereas you could have various degrees of light. For example dim light or a 'yellow' light.

Now I added the 'second' background if you like. For this I simply made a big black rectangle, sized it up to the size I wanted it to be and put it into place (the dead centre width ways with a very small border along the top). Then I made it slightly transparent so the 'first' background was visable through it.

Underneath is where the main body and foreground of the website started to take place. The eagle image I took from the cd cover which Jeb and Josh were creating while I did the webpage. Together we decided on the font and colours for the writing and these also features on both ancillary tasks. After looking at many websites in my lifetime and analysing two music websites for Media, I decided on the links for the banner (home, news, tour, media, downloads and blog). However over the many stages of the website they do change to home, news, tour, media, shop, blog and band. At one point in the middle some stages have the first version, some the second until I stick with the second version towards the end. This shows at one point I must have been undecided on the change (I cannot remember if I was or not).

Above at this point the front cover of the album is complete so I add it onto the website, as a band website is a source for promotion in real life so I made a conscious effort to do so. Below for the shop items all I did was find a blank black t-shirt and a blank grey hoodie. For the keyrings I went onto a keyring website and found a keyring with something or someone in it. Then in illustrator I put the front cover onto them. This was easy for the t-shirt and keyrings because the backgrounds on them were also black. For the hoodie the background wasn't black so I had to just extract the eagle which was harder and more time consuming than I expected. Afterwards I then copied them onto Photoshop and sized them up and put them into place on the webpage. As you can see from the one below the image below all this took two attempts, the first time It was not quite right.

From here nothing changes, just more things which already appear above are added. All the pieces of writing feature in their seperate boxes, for example the tour dates are in one box and each news story has it's own box. Each story has a simple layout. Firstly whether its from news or twitter, then what it is, then on the next line in smaller font date, comments, views and view more. For the login and search boxes all I did was create a small white rectangle, size it up and put it into place.