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.

Hand out for Presentation – Website Vote

Everything I talked about in my presentation is also here, present on my blog. Here is the hand out I made and I gave one out to everyone who was present.

Typefaces I found:

http://www.carterwongdesign.com

Verdana in size 7.5

I couldn’t identify the other typeface.

http://www.pentagram.com

The typeface used for their logo is Modern No. 20

Arial in size 13.5.

http://www.whynotassociates.com

Helvetica in size 9

Helvetica in size 15

http://www.spin.co.uk

Helvetica in size 10

http://www.ligalux.de

Georgia in size 14.5

Courier in 8.5.

http://www.studio-cuculic.hr

Verdana in size 8.5

http://www.designgruppe-koop.de

Verdana in size 7.5

http://www.nbstudio.co.uk

Helvetica Neue in size 8.5
Helvetica Neue in size 11
Helvetica Neue in size 27
Georgia in size 11
Georgia in size 21

http://www.hat-trickdesign.co.uk

Arial in size 10

I couldn’t identify the other typeface.

http://www.segura-inc.com

Tahoma in size 9

Tahoma in size 10.5

http://www.miltonglaser.com

Arial 12

Arial 9

Arial 15

The tutor suggested we take a vote to see which website we thought the best. As you can see the class voted that Pearlfisher is the best.

The worst website was voted for and it was Jake Tilson.

Sagmeister won the vote for the best designs.

Looking at miltonglaser.com

  • What is the immediate ‘feel’ of it?

 Its clean, simplistic and looks professional.

  • How are images used?

 If you click on ‘The Work’ it loads this page. Each picture is a link which you can click on to see the corresponding design.

I was really glad to see that this website had a large space for the design and a smaller space for the text.

  • Choice of typefaces?

Arial 12

Arial 9

Arial 15

This section is an interview and you can see there is a lot of type. I don’t understand why the designer didn’t at least put a space in-between each question and answer set. Instead its all lumped together which makes it look really unappealing and over-whelming.

  • Navigation – is it easy and straightforward or difficult and frustrating?

This part of the website was really annoying. I was trying to read the type on the designs and the next design kept loading and appearing before I’d barely looked at it. I found this really frustrating.

All images from http://www.miltonglaser.com/

Using the svBuilder

I clicked on New Gallery.

I dragged the three cloud files on to the ‘Add Images’ space and they appeared on the right. I changed the caption of the files to a different name which would be seen by the viewer.

Size of webpage, image source and image sizes are the other options that can be changed here.

I clicked the ‘Customise’ button. The options on the left appeared. I changed the text colour to purple. I clicked ‘Publish’.

Gallery height, gallery width, background colour, text colour, frame colour, frame width as well as the title of the gallery can be edited. The layout of the page can also be edited.

I clicked save.

Here you can see the changes I made.

 

http://www.simpleviewer.net/simpleviewer/support/svbuilder/

First class using SimpleViewer

html - hyper text mark up language – the elements from which a webpage is built

CSS - Cascading Style Sheets

XML - Extensible mark up language

Audience – students, designers or possible employers.

Index – home page.

Gallery – style

Images – my final pieces

Thumbs – thumbnails

FTP- File Transfer Protocol – Network protocol to transfer files from one host to another.

34sp.com – to buy a domain – cheap – £3.99 a month – one click service for WordPress.

Root folder – where all the files are saved.

Open Source software – Code that is accessible and can be edited by anyone.

Here is the website where I downloaded SimpleViewer. The website tells me that ‘SimpleViewer is a free, customizable image viewing application. Lightweight and easy to use, it features smart preloading, a resizable interface, thumbnail menu and optional description text.’

Quote from ‘http://www.simpleviewer.net/products/

http://www.simpleviewer.net/products/

First of all I installed the svBuilder.air file.

Here is what the SimpleViewer Builder looks like.

Dreamweaver > site > new site. I then needed to give the site a name.

We called this site ‘Simpleviewer Test’. Then I clicked on the little folder icon.

Now I looked for the location where I wanted to save it. I clicked ‘Choose’.

In this case I saved it on my memory stick in a folder called ‘Website’. I clicked the save button.

Then I double clicked ‘gallery.xml’.

Here I clicked ‘Open’.

Here is what the code looks like in the gallery.xml file. Blue text can’t be edited, green text can.

It probably is quite difficult to see but near the top where it says:

title=”SimpleViewer Gallery”

I changed it to:

title=”Emily’s Gallery”

title – Text to display as gallery title
textColor – Colour of text, set as a hexadecimal code.
frameColor – Colour of frame around images, hexadecimal code.
frameWidth – Width of frame around images in pixels.
thumbColumns – Number of columns for thumbnail images.
thumbRows – Number of rows for thumbnail images.
maxImageWidth – Sets maximum width of images in pixels.
maxImageHeight – Sets maximum height of images in pixels.

Now I double clicked ‘index.html’.

Here is what the page looks like.

We downloaded these images from Moodle.

In the simpleviewer_230 file I opened the images file and deleted two files called tall.jpg and wide.jpg. I then put the new images into the folder called ‘images’.

I also needed to make some new thumbnails to replace the old ones. I used Photoshop for this. I made a new file with the size 110px x 75px. I set the resolution to 72dpi.

I opened up the image called Cloud2.jpg and dragged it over in to the new file I’d made. I moved the image around until I got a nice looking thumbnail picture. I then saved the new file in the thumbs folder. I did this for all three images.

I then deleted off the code, from the bottom, so only three lots were left. Originally there was nine lots of code but I’m only using three pictures. I had to be careful not to delete this part from the very bottom though:

</image>

</simpleviewergallery>

I changed the code so it went from:

to:

I should have called the thumb image Cloud2 like the original image. I fixed that after but I don’t have a screen shot for it.

There is also the option of adding in a link and caption.

I will be finishing this work in the next class.