Animation – Slice – Portfolio

I made an animation in Photoshop that would sit on my home page. During my research I really liked the sites that had an interesting home page. So I think an animation will grab attention.

Here is what the finished animation looks like in Photoshop.

I don’t have any other screen shots for this animation so please refer to one of my previous posts to see the method I used to make a previous animation. Here are the details for the post:

How to make an animation in Photoshop

Next I sliced up my design using the slice tool. I used the slice select tool to edit the slices to make sure they were the right size.

Using the text tool I drew a box in the centre slice. I added in the text I wanted which is details about me. I then edited it to make sure it was the right size and I changed the type face to Alber and the title is Madawaska.

I copied the template file to make the contact page. I added the content using the same method as above.

File > Save for web and devices. A box popped up and I deselected all of the files apart from the slice which contained the text I previously entered.

I clicked to select the Home slice. I hit the delete key. Insert > image objects > roll over image. This box popped up. Firstly I searched for the image with black type and then in the box below I searched for the image with orange type. Then I clicked OK.

I then repeated this method for the other pages.

I clicked on the contact slice to select it. I then held down the mouse button and dragged it over to the contact.html file. This links the button to the page. When the contact button is clicked the browser navigates to the contact page.

I then repeated this method for the other buttons on all the pages.

I then used the method in this tutorial to make the thumbnails for my portfolio gallery.

To do this first I drew nine boxes using the rectangle tool and filled them with red. I used guides to keep them equally spaced.

I used File > Place and then I searched for where my picture was saved. I then clicked insert. The tutorial showed me how to make a layer mask. I hovered the cursor in between the layer with the red square and the layer with my image on it, I then held down alt and clicked the mouse. This then crops the part of the image outside of the square.

I repeated this method with a different image for each square.

I then sliced around each box.

I then saved the page using File > Save for web and devices. This box popped open and I unchecked the images that did not need to be replaced.

I copied the portfolio Photoshop file to create the second page. Using the text tool, I drew a small box and typed in an arrow ‘<‘.  I then sliced it.

I used the slice to create a link to the previous portfolio page.

I then saved the page using File > Save for web and devices. This box popped open and I unchecked all the images as none needed to be replaced.

This is what the finished page looks like in the browser.

To add the text, I used the text tool. To insert the images I used File > Place.

I was disappointed to see how small they looked.

At this point I decided to use the SV Builder as this displays the pictures more clearly.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s