Tag Archives: menu

How to make an animation in Photoshop

Make a Photoshop document. On the first layer type 1. Call the layer 1.

Duplicate the layer.

Call the new layer 2.

Using the type tool, click on the box and type 2. Do not use the type tool to draw a new box as this makes a new layer appear and you don’t want that.

Duplicate the layer.

Call the layer 3.

Now I have three layers. Window > Animation.

A menu will appear. I clicked on this button to get the frames view.

For the first frame I clicked off the 2nd and 3rd layer.

I clicked to make a new frame.

For the second frame I clicked off layer 1 and 3.

I clicked to make a new frame.

For frame three I clicked off layer 1 and 2. I then clicked on the frame to get this menu to show.

I selected to show layer 1 for two seconds.

I selected to show layer 2 for two seconds.

I selected to show layer 3 for two seconds.

I then clicked on frame 1, pressed control and clicked on the frame 2 so that both were high lighted.

I clicked the tween button and added in 5 transition frames. I clicked OK.

I then highlighted frame 2 and 3 so they were both selected.

I clicked the tween button.

I added in 5 transition frames. I clicked OK.

I clicked the play button to see what it looked like.

I didn’t like how it looked because the sequence played too quickly so I changed the transition frames to show for 0.1 seconds. You can see that I can select more than one frame at a time.

I tried that but it didn’t look good so I set all the transition frames to 0 seconds and kept the three original frames at 2 seconds. I tried this out and it looked good.

Now I needed to save it. File > Export > Save for Web and Devices.

I saved it as a gif. Click Save.

Select Images Only. Click save.

I then opened up Firefox and dragged and dropped the gif into Firefox.

I had my gif set to show the sequence once.

I changed the setting to Forever which means it loops.

www.whynotassociates.com – Task 1)

1) What kind/type of website is it (commercial, fan site, informative, helpdesk, forum for art and culture or music etc).

This website showcases the work of a design company called Why Not Associates. This website is commercial.

This links to who is the website for, who is it directed at? Who might be using it.

This website tells me that the design team welcomes big companies like Nike or ‘small locally based commissions’. Students could use this website for research purposes, like myself.

You then need to evaluate it in terms of its function and user group – what will they think of it?

This website doesn’t have any gimmicks at all that I can see. I don’t know if this very simple style would impress a large international company or not. One could argue that why not associates are so confident that they don’t need any fancy scrolling capabilities. They have worked with Nike so obviously a plain site is not a problem.

What are the visual aesthetics of the content of the website? What is the immediate ‘feel’ of it? A PMI might help

Plus – Please see ‘Interesting’.

Minus – I didn’t find the home page particularly appealing or amazing but others may disagree.

Interesting – The first thing that surprised me was that they had this image as their home page. It’s just hand writing in felt tip. I have to say I don’t get it but it made me want to click around to find out what their work is really like. This image made me think ‘Ahhh wise guys’ like as if they were trying to have a joke. It certainly makes you wonder what they’re about.


ask WHY it has been designed like this and HOW does it communicate.

On the left hand side there is a menu giving links to the different type of graphic work they do e.g. print, book design, motion. If I click Print it brings up another menu and I can click on one of their projects to see the designs. I think it had been designed like this because this is a very easy and simple way of making the different types of work available for viewing.

Page size/length. Are these beneficial to the site or do they make it difficult?

I didn’t find any problem with the page size and length. The only thing I noticed was all the blank space left on the page, see below. There is no need/option to scroll right. This isn’t a problem, just something I noticed. I realise that this site has been designed so people with small monitors can still use it and so they can see the whole of a design without having to scroll left to right.


How are images used? PMI but be specific about effectiveness and purpose

Plus – I liked the fact that I could just click on an image and the next one would load so there was no scrolling left to right. It gives good control. If you have a slow loading time it would probably be really frustrating though.

Interesting – It is interesting to see a site that doesn’t use left to right scrolling.

Minus – It took me a while to work out that the quickest way to see the next image is to click it. At first I thought there was only one picture for each project.

One thing I didn’t like was the way that the pictures of the final designs were taken. Instead of having them side by side so I can see them clearly, you can see below that they piled them one on top of the other. Others may disagree but I want to see the full final product. Images like this are very frustrating. It seems really lazy when you compare it to the way the other sites displayed their images.


How is typography used? PMI being specific about:

  • Tone of voice of the type
  • Choice of typefaces – are they effective for screen use?
  • Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work

Plus – The tone of voice is friendly and confident. The type is very minimalist which some people may like.

Minus – This page shows the news about the design team. I was really surprised and disappointed that the whole page was just boring text. I can’t imagine who would sit there and actually just read this tiny text. The press page is similar to this but almost worse as it’s just lines of white type with nothing else. Who is going to bother to sit there and read that?


Using white type on a light grey background isn’t particularly easy to read. It took me a while to find the email address which you can see looks tiny.


Its slightly easier to see on this page:


Interesting – It was difficult to find anything interesting about the type used on this site. I suppose the absence of any interesting type is interesting in itself but I’m scraping the bottom of the barrel here.

Back ground colours and textures? Effective or distracting? How and Why.

The background is always grey. I think this is fine as it is not distracting at all. The one this I did notice was I got really bored of just seeing grey all the time. Perhaps a little bit of colour somewhere would have helped.

Does it have gimmicks, animations etc? How and why are they effective or not?

There aren’t any gimmicks at all here that I could find. Perhaps this site could have benefited from a gimmick or animation.

Is the unity of the website spoiled (or aided) by commercial banners and so on?

There are no commercial banners or adverts which is nice as I’m not distracted.

Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

The navigation is very simple and I didn’t have any problems. Once I had worked out that the next image loads when you click on the current image it was a lot quicker. Before I worked that out I was clicking on each link separately which was quite annoying.

How do design elements such as link buttons help the navigation?

This site uses a simple menu system with no gimmicks or fancy scrolling.

Add any other points or comments not addressed directly by these questions.

This site takes minimal to a whole new level. This site has no soul. The designs have a lot of soul but this is not reflected in the website design itself. This site relies on good designs, not a good website.

I was surprised to see a picture/design like this:


I really like this design. It’s really eye-catching and full of energy.


I really liked this too, from one of their free-lance designers: