Lesson 4 - Creating A Web Banner Using Adobe Photoshop

In today's lesson we had to create a web banner for the original website www.postsecret.com, but we had to take the idea from the postcards that we made during induction week.

As you can see the title of my postcard is 'Every penny is beautiful,' which I had taken from a newspaper, so this is what I tried to get across in my web banner. The reason for the content that I have used on my postcard was based around this newspaper cutting. The reason for using these bright colours and an image of Cheryl Cole was to depict the meaning of the word 'beautiful.'

Onto designing the actual web banner, first we had to do some research to find out the different sizes of web banners and were they were used on a web page. I took an example from www.nme.com, there was an advertisement banners at the top of the web page that was 728 pixels wide by 90 pixels high, I then used these dimensions to create my own web banner.

Once I had done my research I was then able to start creating my web banner using Adobe Photoshop. When I first opened up photoshop I had to create a new document but, first I needed to copy the NME banner onto my clipboard so I had the correct dimensions to create mine correctly. Photoshop then gave me my document that was 728x90, which looks something like this:

 This was the first layer of my banner which was called 'Background,' which was just a solid  block colour of white. Now that I've finished with that layer I then had to create 12 new layers, each of these layers consisted of 1 letter and 1 shape and would end up spelling out the phrase 'Every penny is,'

After I had created all of my layers I then had to open up my banner in 'Image Ready,' which would then allow me to create my animation, you are able to do this my clciking on a symbol that looks like this: 

 This is a simple process, all you have to do is select the layers that you wish to be used on the selected frame, then just add a new frame and again select the layers that you wish to use, and repeat this process until you have finished your animation. In 'Image Ready' the animation bar should look something like this:

This screen capture shows what my banner looked like without any animation when I previewed it through 'Internet Explorer.'

After a 3 hour lesson this is my completed animation:



Click Above To View Animation

Different File Formats

Portable Document Format (PDF) File:

PDF files are viewable and printable on any platform and look like original documents which preserve source file information for example: text, drawings, multimedia, video, 3D, maps, full-color graphics, photos. If created using Acrobat you can digitally sign or password-protect PDF documents.

Bitmap, Joint Photographic Experts Group (JPEG) & The Graphics Interchange Format (GIF) Files:

In a bitmap image, the image file has to define the exact color of every pixel in the image, however in a GIF image, the number of colors is reduced to 256 and then 'runs' of same-color pixels are encoded in a color as well as the 'number of pixels' format. An animated GIF is a sequence of GIF files all bonded together and displayed one after the other. However, a JPEG file uses a much more complex process to compress images for example: photographs, where the color of every pixel is different.