Tag Archives: Photoshop

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.

Photoshop to Dreamweaver

First I logged on to Moodle and downloaded the image of the website. I do not have a reference for this image because the tutor supplied it. You can see it is made of lots of different layers.

I use the slice tool to make a box around all the elements. If I want to adjust the size of the box I use the slice select tool.

Here is how the image looks now that it has been sliced in to sections.

Then I clicked file > save for web & devices.

I clicked on one of the squares. I choose jpeg…

…and I clicked save.

I clicked new folder. I called it welcome page and clicked create.

I clicked HTML and images and…

…clicked save.

I then duplicated the webpage file and renamed it to make the second page.

I then went to where I had saved the work.

I right clicked on the folder > open with > firefox.

This is how it looks in the browser.

I opened Dreamweaver. I clicked on portfolio.html

I clicked site > new site.

I then chose the root folder.

Here is how it looks in Dreamweaver.

I then opened the duplicated welcome-page file as well.

On the second page I clicked on the green box and hit the backspace button. This made the picture disappear.

Then I made a new picture to replace the one I just deleted. I made a new file in Photoshop using dimensions I got from Dreamweaver.

I then saved it. I should have saved it in the root folder which is the folder called ‘Welcome Page’.

I made a quick and simple design.

File > save for web and devices.

I clicked save here.

I clicked save.

On the second page I then inserted the image to fill the blank space. Insert > Image.

I clicked on my picture and clicked choose.

I clicked yes. This error message popped up because I failed to save the picture in the root folder. The folder called ‘Welcome Page’.

Then a box popped up and I typed in a description of the image.

This is how it looks now with the new, inserted image.

I clicked on this link in Dreamweaver.

The name of the image appears in the source field.

I then clicked on the target and dragged the cursor over to right on to portfolio.html

I then clicked on the Home slice. The name of the image appeared in the Source field.

I clicked the target and dragged the cursor over to the right on to welcome-page. Welcome-page then appears in the Link field.

File > save

File > Preview in Browser > Safari

The webpage now looks like this. I clicked around to make sure it worked.

In Photoshop I turned off the visibility of the upper layer. This made the image underneath visible.

I took the slice tool and I drew new slices over the links so that when I saved the file I would have an image for when the button was rolled over and for when it wasn’t.

Then I was able to choose the Slice Select Tool,Then I right clicked on the slice using the slice select tool. I choose the option Edit Slice Options.

A box popped up where the name could be changed to something descriptive.

I typed in Home_on.

Then I did the same for portfolio…

…and for Contact.

File > Save for web and devices.

I clicked save.

I clicked the option HTML and Images. I clicked save.

I clicked replace.

I selected and deleted the image.

I then clicked Image Objects > Rollover Image.

I selected Home_off.gif from the list and clicked Choose.

I saved again.

I then did the same for the Portfolio_On.gif

I selected the original image and the new, rollover image from the list and clicked Ok.

File > Preview in browser > Firefox.

This is how it looks.

I rolled over the link called Portfolio and it turned white.

Putting final design app icons on to an iPhone

The tutor showed us where to get this download. Someone has created all the parts of the iPhone in vector form which is really useful for me. This download tells me that the typeface I need to use is Helvetica Neue Bold. The only part I need from the download is the body of the phone.

http://www.teehanlax.com/blog/iphone-gui-psd-v4/

Here is the screen I am using which was donated by a friend who owns an iPhone.

Here I am using guides to try to fit the icons on to the iPhone.

Here is how my first try at fitting them on the iPhone turned out. The bright colours contrast well against the dark background. The icons can be seen clearly.

Here I am adding the names of the apps using Helvetica Neue Bold.

I needed to put quite a lot of guides on the screen because it was difficult to get the icons and type to line up straight.

Here is the final design which will be printed. I’m really happy with it and I have had positive feedback from fellow students. I have had a lot of feedback from tutors and fellow students over the course of the project and I have remembered their reactions and made changes based of what people have suggested. I like to get feedback because it is really helpful. I wanted to bring some fun to measuring apps, give them a modern make over and liven then up a bit.

Vector design for Anemometer and connotations

I looked up anemometer on the internet and found out that they look like this. This isn’t the type of image I’m particularly familiar with so I decided not to follow this as an idea.

http://www.wpclipart.com/weather/weather_instruments/anemometer.png.html

When I think of wind I think of wind socks so I decided to use this idea. Here are some pictures I looked at on the internet.

http://us.123rf.com/400wm/400/400/ricok/ricok1003/ricok100300054/6667814-a-wind-sock-on-a-windy-day-and-blue-sky.jpg

http://www.airportwindsocks.com/images/categories/011.JPG

I used the pen tool to draw a very simple wind sock.

Connotations

Is your design clear and easy to understand?

I am not sure if people would know this is a wind sock or not. The pink colour background probably doesn’t help as wind socks are usually seen with scenery behind them.

How might others view it? How could it be mis-read?

Others may think it is a flag. People may read in to the pink background as pink is sometimes seen as a ‘girly’ colour.

Does it look appropriate or does it refer to other meanings?

I think using a wind sock is appropriate as it is the first thing I think of when I think of measuring wind.

Vector design for the Decibel Meter and connotations

I had the idea to do a stereo sound display to show the idea of sound.

http://www.shutterstock.com/pic-70946092/stock-vector-music-center-and-sound-levels-are-shown-in-the-picture.html

Another idea I had would be to use a wavy line like these, to signify sound.

http://www.schoolphysics.co.uk/age11-14/Sound/text/Sound_waves/index.html

I decided to use the stereo display idea. This was my first attempt. I thought it would be best to make it look symmetrical but it doesn’t look as good as I thought it would. I found it hard to make the idea look realistic.

I decided to change it and make it unsymmetrical. I hope this makes it look a little more realistic. I don’t have a screen shot of it but I then went in to Photoshop and added the inner shadow so it matches the others.

Connotations

Is your design clear and easy to understand?

I think this design is clear as the blocks are easy to see even when I zoom right out. I am not sure if people will understand that this is meant to represent a stereo sound display.

How might others view it? How could it be mis-read?

People may think they are looking at sugar cubes, building blocks or city tower blocks.

Does it look appropriate or does it refer to other meanings?

I think the idea is appropriate because most people should recognise sounds levels.

Vector design for the Speedometer and connotations

I thought I would have a look on the internet to see what type of speedometer are already out there. This one is really simple and eye-catching.

http://static2.bigstockphoto.com/thumbs/1/4/6/large2/6414946.jpg

The one is amazing because it looks so real. It looks like a photograph but it’s actually a vector.

http://static3.depositphotos.com/1000417/127/v/950/depositphotos_1270240-Speedometer-vector-illustration.jpg

Since my icon is going to be tiny I decided to design something really simple. In illustrator I used the pen tool and the rotate tool to make a really simple image.

Connotations

Is your design clear and easy to understand?

I tried to make it really simple so that people would be able to see what it is by not including a lot of colour or detail.

How might others view it? How could it be mis-read?

It could be misread as a general dial and not a speedometer. Dials are used for many purposes which could be confusing.

Does it look appropriate or does it refer to other meanings?

I think it does look appropriate but it could refer to any type of dial.

Glow sticks for double page spread

I wanted to use this picture as it shows the cyber hair style really well. I cut out the figure in Photoshop.


http://www.shutterstock.com/pic.mhtml?id=37945567

I thought these glow sticks would be really colourful and eye-catching.


http://www.shutterstock.com/pic.mhtml?id=1415857

Here I am trying to get the title to be seen on the page with the glow sticks. The colours mean the type can be difficult to see so you have to get it in the right place.

I have placed the title along the glow stick. I think this idea works well and the different elements have space to breath.

I think using two pictures looks more attractive than just having a large amount of body text. I checked with the tutor that I had enough body text here and I do. I will most likely be using this idea as my final idea.