1. Web Foundations TUESDAY, NOVEMBER 12, 2013 LECTURE 27: PHOTOSHOP TIPS & TRICKS

2. Photoshop Project Walkthrough CAVEAT: There's a right way, there's a wrong way, there may even me an easier way, and then there's my way. The following Photoshop walkthrough represents how I would go about working through the Photoshop assignment. As with all developers and designers, everyone has their own unique way of doing things, so your miles may vary.

3. Photoshop Project Walkthrough Step 1 – JPG Part A Change the copyright status for the coffeeAnyone.jpg image to reflect similar information as shown. 1.Open coffeeAnyone.jpg in Photoshop 2.From the menu bar, select File > File Info, and enter the pertinent language, then OK

4. Photoshop Project Walkthrough Step 1 – JPG Part B Resize the image to 1024x768px. Save as a JPG, titled “coffeebg.jpg”, adjusting the quality and blur to get the best image quality for about 50kB 1.From the menu bar, select Image > Image Size and resize the image to 1024 x 768. 2.Select File > Save for Web and save as coffeebg.jpg and adjust quality and blur to get best image for 50kb.

5. Photoshop Project Walkthrough Step 2 – GIF Part A Change the copyright status for the image and add the same copyright information as the last image. 1.Open tiki.psd in Photoshop 2.From the menu bar, select File > File Info, and enter the pertinent language, then OK

6. Photoshop Project Walkthrough Step 2 – GIF Part B Resize the image to 180x300px. Save the image as a GIF, titled “tiki.gif”, adjusting the color table to 32 colors, but locking the main image colors to prevent noticeable color shifting. Use the solid background color as your transparency color. Final image size should be about 8kB 1.From the menu bar, select Image > Image Size and resize the image to 180 x 300. 2.Select File > Save for Web and save as tiki.gif and adjust color to 32 bit, select Transparency, (color table will be locked by default) and save image at around 8kb.

7. Photoshop Project Walkthrough Step 3 – Edit Mockup Part A Open the Javaco Mockup file. Drag-drop the JPG and GIF images you created in Steps 1 & 2 into the mockup. Resize as necessary. Rename each new layers and organize in the appropriate layer set. 1.Open the javaco_mockup.psd file in Photoshop 2.Drag and drop the coffeebg.jpg into the mockup, then use the Move Tool from the top of the Tool bar to place it. In the Layers menu, drag the coffeebg.jpg into the background folder (set it above the white background). 3.Repeat with the tiki.gif, then move it in content folder and set it above the Shape2 element.

8. Photoshop Project Walkthrough Step 3 – Edit Mockup Part B Set the opacity of the coffeebg layer to 60%. Select the heart shape in the coffee foam and copy it onto a separate layer named floating heart. Move the floating heart layer above the content layer set so that it appears above the content box as shown. 1.Use the Magic Wand Tool to click inside the coffee cup to get an initial selection, then hold down the Select key on the keyboard to use the Magic Wand Tool to remove any little floating of islands that didn't initially get selected (you may want to zoom in using Ctrl + + a couple of times to get a better view) [CONTINUED NEXT SLIDE]

9. Photoshop Project Walkthrough Step 3 – Edit Mockup Part B Set the opacity of the coffeebg layer to 60%. Select the heart shape in the coffee foam and copy it onto a separate layer named floating heart. Move the floating heart layer above the content layer set so that it appears above the content box as shown. 2. With the Magic Wand selection still selected, from the menu bar select Select > Select Inverse, then Edit > Copy, then File > New, then Edit > Paste. 3. Use the Elliptical Marquee Tool to capture the heart, then Edit > Copy [CONTINUED NEXT SLIDE]

10. Photoshop Project Walkthrough Step 3 – Edit Mockup Part B Set the opacity of the coffeebg layer to 60%. Select the heart shape in the coffee foam and copy it onto a separate layer named floating heart. Move the floating heart layer above the content layer set so that it appears above the content box as shown. 4. Go back to the javaco_mockup.psd and paste the heart into the mockup (it will create a new layer). 5. Rename the layer 'heart' and drag it into the Content folder above the shape2 element, then align it so it matches the position of the heart beneath. 6. If you want you can soften the edge of the heart using the Blur Tool.

11. Photoshop Project Walkthrough Step 4 – Mask Items Part A Turn on the visibility of the sale item list layers. Apply a fixed-size mask of 140x140px to each of the three list item images 1.Create a new file that is 140 x 140 pixels, then Select > All then Edit > Copy 2.Paste this into your javaco_mockup and align with the first image 3.Use the Magic Wand Tool to select inside this box, then hide the layer 4.Click on the first image layer, then select the Add Vector Mask tool at the bottom of the Layers menu. 5.Move the 140x140 box layer to the next image and repeat the process

12. Photoshop Project Walkthrough Step 4 – Mask Items Part B Add sample item description text in a sanserif font, white. Add a “50% off” text label to the cup item in a fun script font, purple, and rotate its layer as shown. On an additional layer, use a brush tool to cross out the original cup price. Set the layer’s opacity to allow the original price to show.

13. Photoshop Project Walkthrough Step 5 – Background Image Part A Use the stripes.psd document to create a striped background image by filling the vertical bar with blocks of color (assign the foreground and background colors each to one of the three different color study squares then uses the ALT-del and CTRL- del shortcuts to fill the selection with color.) Part B Crop the image to keep just a strip of the vertical bar 10px wide by 800px tall. Set the opacity of this thin, striped layer to 20%. Preview it as a background in the “Save for Web and Devices” process, then save it as stripes.gif.

14. Photoshop Project Walkthrough Step 6 – Slicing NOTE: READ BOTH PARTS BECAUSE THERE ARE INSTRUCTIONS IN PART B THAT PERTAIN TO PART A Part A Create and name Layer Slices as “press”, “cup”, and “bean” for the three sale item images respectively. Do the same for the logo, byline, and heart layers. Create and name User Slices as “50percentoff” and “shop” that include the 50% off label and price cross-out and the shop image and white border respectively. Part B Optimize each of the slices appropriately as press.jpg cup.jpg bean.jpg shop.jpg byline.gif logo.png heart.png 50percentoff.png For the byline, logo, and heart images, be sure to use transparency and matting effectively. Hide the layers behind the heart, logo, and 50percentoff images before exporting so their PNG images will have a transparent background. For the byline.gif, set its green background as a transparency color. Save images from steps 1 to 6 in the images folder. Take a screen shot of the javaco.html page showing all images and the background in Chrome or Firefox or Safari to show that the final images fit seamlessly into the HTML. (NOTE: you should not need to change the HTML/CSS files.)

15. The first thing I did was remove the backgrounds of all the items I was going to slice, since some of these are going to rely on transparency, and then I sliced and named according to the instructions…

16. To name the slices, right-click on the slice and select Edit Slice Options… Name the slices (according to the instructions)

17. When it is time to save the slices, select File > Save for Web, then individually select the image type for each of the named slices (as per the instructions). For example, the logo slice will be saved as a png file type. Repeat for each of the named slices (as per the instructions).

18. When finished, save to desktop or directory of your choice. As part of the saving process, it will create a file name based on the name of your PSD and whatever image type you initially used (e.g., javaco_mockup.png)—this is okay and the expected behavior. When it's all said and done it will save the sliced images in a folder called images.

19. Open the images folder that was saved, and you should see all your named slices as well as all the Photoshop generated auto-slices. You can delete all the Photoshop generated auto-slices if you'd like because they're not going to be used.

20. Move or copy the named slice images into the assignment's images directory.

21. Open the javaco.html file in a browser to see if everything loads correctly (I will be surprised if it does the first time). Tweak the images as needed to get them to behave properly with the HTML and CSS code (you may have to delete some over-lapping pixels, resize the image, crop the image, etc). You may even find a different image type will work better in certain situations (i.e., png instead of a gif). All part of the process…

22. Photoshop Slices & Save to HTML & Images

23. Photoshop Slices 1. Open your PSD and under the View tab, select Extras, Rules, Snap, and Snap to Guides.

24. Photoshop Slices 2. Right-click on the Ruler, and select Pixels (I also changed the color of the guide lines under Edit > Preferences > Guide, Grid, & Slices…

25. Photoshop Slices 3. From the Tool menu, select the Crop Tool and then the Slice Tool

26. Photoshop Slices 4. Grab the Slice Tool and start making some slices

27. Photoshop Slices 5. Select File > Save for Web & Devices and select what compression and image type you (e.g., 75% and JPEG), the Save button

28. Photoshop Slices 6. Under Format, select HTML and Images and under Settings select Other. In the Output Settings popup window, select Settings: Custom, select Slices, and select Generate CSS, Referenced by ID, then OK, then the Save button on the previous window

29. Photoshop Slices 7. Go to wherever you saved your files (I saved my to the desktop) and you should find a generated HTML file and an Images folder than contains all your sliced images

30. Photoshop Slices 8. Double-click on the HTML file to open it in a browser. It should look like your PSD file, except it is actually composed of all your image slices.

31. Photoshop Slices 9. Right-click on the HTML file and open with Notepad++ (or text editor of your choice) to see the generated code (CSS and DIVs).