Photoshop Slicing Tutorial Assignment

Media 202
CASE STUDY: For this project, you have been hired to design a collage style webpage. The subject is
Profile Website which is used to present YOU on the World Wide Web. Your sliced webpage must link to
multiple webpages on the internet congruent to your project and must include a link to your email. You will
use Photoshop to design, arrange the collage layers, add the hyperlinks, and save the image as a
webpage with sliced images. You will then use file transfer protocol to publish your webpage to the
student webserver. An account has been created for you on the pc student webserver.
1. Collage Ideas: Go to the following websites to get ideas for your web interface design. Notice the
details are graphics and photographs made in Photoshop such as scanned torn paper, handwriting
on notebook paper, doodling, and other handmade elements. You can write on paper and digitize the
image with your digital camera or a scanner. You will assemble the individual items in Photoshop so
do not try to arrange them all and take one single photograph.
Go to the following websites to view examples of collage web designs:
http://abduzeedo.com/web-design-collage-sites
http://www.onextrapixel.com/2009/05/20/showcasing-25-brilliant-and-unique-collage-style-web-pages/
http://twiggy.carsonified.com/
2. Web Interface Design:
Your finished web page should include:
1. MY WEB-SITES: Should include two or more links to websites: my facebook page, my weebly
gallery, my youtube page, etc..
2. CONTACT: A link to your email address. If you do not want to use your email replace it
with none@none.com
3. MISSION Statement: An optional statement elaborating on your intent or purpose.
4. BIO: a short personal description or biography.
Use your digital camera to photograph objects and scenes in nature for your collage project. You can also
use a scanner to scan objects, leaves, sticky notes, torn paper, paper clips, pens, pencils, stones, etc.
Save all of the images into one folder that you will access later. Do not use images from the textbook or
from the internet. This project will be published as a website that you designed from scratch so you must
be the creator of all photographs/images used in this assignment.
Arrange images on a single Photoshop document. To improve the design and usability of your homepage
I recommend the following tips:

This assignment is all about the graphics and how to design a layered collage in Photoshop.
Good typography for the best readability demands shorter line lengths.
Do not make the user hunt for hyperlinks make your graphics large enough to find and use
Photoshop text layers as needed.
Give the viewer's eye a place to rest and avoid filling every empty space on the page.
Avoid bright primary colors.

3. Web Folder:
Create a new folder on your computer and call it web. This folder should be empty for now so do not add
any photographs until you are instructed to later in this assignment. This is the folder you will upload to
the webserver via copy and paste. If it contains images that are not used on the actual webpage your
grade will be reduced.
SLICING TUTORIALS ON THE WEB
Read about slices at the following links.
http://help.adobe.com/en_US/photoshop/cs/using/WSE311D2B1-CA39-4bab-8BEE25CF899D1486a.html
http://www.adobe.com/uk/designcenter/golive/articles/glv6sliceimg.html
HOW TO SLICE A WEBPAGE WITH PHOTOSHOP
1. Open Photoshop.
2. Click File > New.
3. Enter the EXACT values shown in the graphic below. They are highlighted in yellow. Save to a
folder on your computer titled web. Name your file index. By naming your file index the main html
page will be titled index.html. This will automatically bring up the website in the main root folder of
your website after you publish to your web folder. In other words you will only need to type your
website address and not type the name index.html. Click OK.

Click File > Save and save the new page as a PSD to your computer. DO NOT SAVE THIS FILE TO
YOUR WEB FOLDER. SAVE IT TO ANOTHER FOLDER WHERE YOU CAN FIND IT.

6. Add the photograph you want to use for your background such as cork board, a textured road, path,
notebook paper, or other texture that fits the theme of your collage. Use Edit Free> Transform to resize
the image so it covers the entire document. Press Enter to apply the transformation.
7. Open an object and arrange it on your document.
8. Continue to add the objects you photographed or scanned and arrange them. Be sure to rotate some
to add a random appearance to the layer placement. To rotate a layer click Edit > Free Transform.
Position your mouse outside a corner box and click to rotate. Press Enter to apply the transformation.
9. Use the type tool to add text to your collage. Experiment with Edit > Free transform to rotate your text.
10. You can add drop shadows to your objects. Be careful not to overdo the shadow effect and try to
match the shadow angle on all objects.
SAVE YOUR PSD IMAGE
Click File > Save to save project as a PSD. If you do not save this as a PSD you will be unable to edit the
image later. Name the file index

SLICE YOUR COLLAGE WEBPAGE

1. Choose the slice tool, located underneath the crop tool. Click and drag the slice tool over the
objects you want to be hyperlinks. Remember you need an email link, a link to a news website,
and a link to a business website, a link to your Weebly gallery.
2. Use the slice tool to slice up the remaining image. Be careful not to create too many slices. I
recommend you try to have 10-20 slices.
3. Choose the select slice tool, it is hidden under the slice tool in the toolbox.
Click on the slice anchor points and drag them to resize.

ADD AN EMAIL LINK

1. Now you will add your email link. Be sure to add text or a graphic of an envelope so users can
find your email link. If I cannot locate your email link you will receive a zero for this part of the
assignment.
2. Choose the select slice tool and double click on the slice you want to be your email link. Enter the
values below, of course you should use your email or none@none.com and use your name not
mine. The URL must include mailto: and the Target will open the link in a new window when set
to _blank. The Message text is the text that displays in the taskbar when the page is displayed in
the browser. The Alt Tag is the text that appears when the mouse hovers over the link.

ADD A LINK TO YOUR WEEBLY GALLERY

Now you will add the hyperlink to your Weebly gallery. With the select slice tool active doubleclick inside a slice you want to use as a link to your Weebly gallery. You must type
http://yourweeblyaddress to link to your gallery. See below and replace my information with yours.

Links:
Now you will create a link to a news website.

SAVE FOR WEB AND DEVICES

Click File > Save For Web and Devices. Choose the select slice tool located on the tool bar in the Save
for web and devices dialog box.
2. Click on each slice and choose JPG high from the Preset. JPG is best for photographs and will
produce the best quality. You can use PNG for smaller file sizes, however you should use the highest
PNG quality setting.
3. If you are unable to access a slice use the hand tool to move around or the zoom tool and the alt key to
zoom out.

4. Click Save and browse to your Web folder.

5. Use the name index for the file. Confirm that the name of your file has no punctuation, capital letters,
or spaces. (see below) Click the down arrow in the Save as type box and choose HTML and Images. This
will save an html webpage and a subfolder called images. All of your sliced images will be saved into the
images folder. The code on the html page will reassemble the images on the page like a seamless
puzzle.

6. Click the down arrow in the settings box and choose Other. This should open the Output Settings
dialog box. Click Next and check Generate CSS. Click OK.

7. Click Save. Your sliced website should now be saved into your web folder on
your computer.
8. Minimize Photoshop and go to your Web folder saved on your computer. Inside you should find an
HTML document and the images folder. The html page is your webpage and the images folder contains
your sliced photos that will be reassembled by the code in the html page.
9. Double-click on the HTML page to preview your webpage in your browser. Test your links. If your links
do not work you must return to your PSD image in Photoshop. Choose the select slice tool and doubleclick on the slice that contains the broken link. Confirm that you followed the assignment instructions and
used the correct website addresses and mailto: for your email. Save and test your webpage again.

How to publish websites to the student webserver

1. Download and install free Filezilla Client for all platforms at http://filezilla-project.org/
2. Choose Windows or MAC according to your operating system. Download the .exe file and install
on your computer.
3. Run Filezilla on your computer.
4. To connect to your folder on the student web server you will create a connection.
5. Click the Site Manager button.

6. Click the New Site button and type your name.

7. Go to the Host: box and type student.pencol.edu

8. Choose Normal for the Logon Type.
9. Enter your username and password.
USERNAME= first name and first letter of your last name
PASSWORD= ##!!123AB! (Replace AB with your initials in all caps.)
Example for Jane Doe
Username= janed
Password = ##!!123JD!

10. Click the Connect button.

11. Locate the folder in the right column titled public_html. This is the only folder you will use for this
class. Any files you put in the public_html folder will be published to the internet.

12. In the left column browse to the web folder that holds your website. Double click on the web
folder to open.
13. Drag and drop ALL the files and images folder from inside the web folder from the left column
into the public_html folder on the right column. Do not reorder the images.
DO NOT PUT FILES INTO IN ANY OTHER FOLDER IN THE RIGHT COLUMN.

14. To view your website open your browser such as Internet Explorer, Firefox, or Safari.
15. Type http://yourusername.student.pencol.edu/
For example Jane Does project will be at the following address
http://janed.student.pencol.edu