Transcript 8a - Programajama!

Web Foundations
TUESDAY, NOVEMBER 12, 2013
LECTURE 27: PHOTOSHOP TIPS & TRICKS
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.
Photoshop Project Walkthrough
Step 1 – JPG
Part A
Change the copyright status for the
coffeeAnyone.jpg image to reflect similar
information as shown.
1.
2.
Open
coffeeAnyone.jpg
in
Photoshop
From the menu bar, select File > File
Info, and enter the pertinent
language, then OK
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.
2.
From the menu bar, select Image >
Image Size and resize the image to
1024 x 768.
Select File > Save for Web and save
as coffeebg.jpg and adjust quality
and blur to get best image for 50kb.
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.
2.
Open tiki.psd in Photoshop
From the menu bar, select File > File
Info, and enter the pertinent
language, then OK
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.
2.
From the menu bar, select Image >
Image Size and resize the image to
180 x 300.
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.
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.
2.
3.
Open the javaco_mockup.psd file in
Photoshop
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).
Repeat with the tiki.gif, then move it in
content folder and set it above the
Shape2 element.
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]
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]
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.
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.
2.
3.
4.
5.
Create a new file that is 140 x 140
pixels, then Select > All then Edit >
Copy
Paste this into your javaco_mockup
and align with the first image
Use the Magic Wand Tool to select
inside this box, then hide the layer
Click on the first image layer, then
select the Add Vector Mask tool at the
bottom of the Layers menu.
Move the 140x140 box layer to the
next image and repeat the process 
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.
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 CTRLdel 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.
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.)
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…
To name the slices, right-click
on the slice and select Edit
Slice Options…
Name the slices (according to the instructions)
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).
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.
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.
Move or copy the named slice
images into the assignment's images
directory.
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…
Photoshop Slices & Save to HTML & Images
Photoshop Slices
1. Open your PSD and under the View tab, select Extras, Rules, Snap, and Snap to Guides.
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…
Photoshop Slices
3. From the Tool menu, select the Crop Tool and then the Slice Tool
Photoshop Slices
4. Grab the Slice Tool and start making some slices
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
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
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
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.
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).