Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Slicing+rollovers

3,012 views

Published on

  • Be the first to comment

Slicing+rollovers

  1. 1. Artist/Musician AssignmentRollovers with Photoshop & Dreamweaver 1
  2. 2. 1 Step 1: Organization Start with a Main Folder for your whole project. Artist_main It will contain some Subfolders: 1 Subfolder #1 ²Working Files ➣➣Contains files you gathered/liberated to create your comp Artist_workfiles Artist_website ➣➣Also contains your comp 2 Subfolder #2 ²A root folder for your website. ➣➣Only files destined for a server will go in here. 2
  3. 3. Step 2: Open Comp in Photoshop2 & pull guides along the slice lines If you turn on View>Snap to>Guides your slices will snap right to the guides.Make sure Back, Next and Nav are in the resting(non-hover) state. 3
  4. 4. Step 3: Create slices with3 slice tool The slice toolThe slices you makeare User Slices.They’ll have a littleblue tab in the upperright corner.Photoshop willcreate Auto Slicesfor all the areas youdon’t slice. They have Areas to slice:a gray tab in theupper right. 1 Titlebar 5 Next 2 Illus 6 Textarea 3 Ani 7 Nav 4 Back 4
  5. 5. Step 4: Edit Slice Options for each Slice4 {Right click the slice > Edit slice options} Enter the name of the image per the Musician Map Double check that the slice is the right distance from the top and left Double check that the slice has the correct dimensions per the Musician Map. 5
  6. 6. 5 Step 5: slicing the nav area 1 Make one big slice from the navbar. 2 Right click ² Divide Slice. 3 Choose Divide Vertically. 4 Adjust slice divisions if necessary. 5 For each new slice, use Edit Slice Options to give the slice a name. 6
  7. 7. Step 6: Get ready to optimize6 and Save Make sure to turn off the MusicianMap.ai layer if you used it - you don’t want it to appear in your optimized images. Make sure that the Navbar images and the Back and Next slices are in their resting (non-hover) states. 7
  8. 8. 7 Step 7: file > Save For Web You’ll end up here, at the Save for Web screen, where you optimize your slices prior to saving them. This is pretty familiar by now! When you click Save, Photoshop takes you to the Save Optimized As dialog box.There, you can direct Photoshop to create an html page and CSS atthe same time it’s creating your slices.{ZOMG!} 8
  9. 9. 8 Step 8: The Save Optimized As box The Artist_website folder you created in Step 1 should be here. Select HTML and Images here Select All Slices hereWhen you have the above 3 options in place, select Custom in theSettings dropdown. In the Custom dropdown, select Other. 9
  10. 10. 9 Step 9: Output Settings Select Slices from this dropdown Select Generate CSS Referenced by ID in this button/dropdown area.Select OK>Save>Save AND THE MAGIC IS COMPLETE! 10
  11. 11. q Step 10: the files you created Psy_template.html The web pageArtist_workfiles about.jpg ani.jpg images back.jpg discography.jpg Images home.jpg folder with illus.jpg many images next.jpg Psy_template_08.jpg Psy_template_10.jpg Psy_template_11.jpg Psy_template_13.jpg Psy_template_15.jpg Psy_template_16.jpg Psy_template_17.jpg Psy_template_18.jpg textarea.jpg titlebar.jpg 11
  12. 12. w The web pageIn the browser The html (lol)Photoshop creates a web page with anabsolutely positioned div for each slice.All the divs are contained in a div called#Table_01. It, too, is absolutely positioned atthe top left of the body element. Thus, thepage is not centered and is jammed up at thetop left. We’ll take care of that later.First, we’ll make the rollover buttons. 12
  13. 13. e Creating Button Hover imagesWe’ll create and save a new image for the hover state of eachnavbar button and for the back and next buttons.Go back to your Photoshop comp.Turn on the hover state for each of the navbar buttons and forthe back and next buttons. I gave mine a lovely pink glow using layer effects. 13
  14. 14. r Creating Button Hover images (continued)Using the Slice Select Tool,select each navbar slice.Right click > Edit Slice Options.Rename each navbar slice. Thename should be somethinglike Home_hover orHome_mouseover.Do the same with the back andnext buttons.Next, we’ll go through the Save for Web process again, but just forthese images. 14
  15. 15. t Saving hover images In the Save for Web Optimization screen, select only the navbar slices and the back and next slices. In the Save Optimized As box: The Artist_website folder you created in Step 1 should be here. Select Images Only here. Select Selected Slices hereSelect OK > Save > Save and Photoshop will send the new images to theimages folder. 15
  16. 16. y Creating the Rollovers Open your html file in Dreamweaver. Make sure that the Dreamweaver Show Code and Design view is selected, so you can see both versions. Also, select Window > Workspace Layout >Classic 16
  17. 17. u Creating the Rollovers (cont.) Turn on Window > Behaviors The Tag Inspector/Behaviors panel will open in the panel area on the right. In the design view, click on one of the navbar button divs to select it. Under Behaviors, click the + sign 17
  18. 18. i Creating the Rollovers (cont.) Select Swap Image In the Swap Image dialog box, select browse and navigate to the “_hover” image for the navbar button you selected. When the image file’s name appears in the Set Source to box, select ok. 18
  19. 19. o Testing your RolloverSave your html page:To Preview in Browser, select the globe icon from the toolbar atthe top of the screen and choose a browser.Repeat steps 16 and 17 with all the rollover divs. 19
  20. 20. o Tweaking your page - Final StepsTo add text to the text area1 Delete the image from inside <div id=”Textarea_”>.2 Add the image as a background image to the #Textarea selector in the CSS.3 Returning to the div itself, add in your text.To center the page (if you wish)1 Photoshop creates a div called #Table_01 that’s a container for all the divs inside it.2 Change the CSS of #Table_01 so that it behaves like the #wrapper div we have used in other assignments.3 Visit http://bettyopolis.com/announcements/ centering-an-html-page/ for more information.Gif animation1 Create the Gif animation separately. Insert the image in the appropriate div in your html page. 20
  21. 21. � FIN � 21

×