artC301
COMPUTER GRAPHICS III
CLASS NOTES
CLASS :: 03
09.23
2015
4 Hours
AGENDA
HOMEWORK 2 PRESENTATIONS
:: PSD Wireframe Critique
:: Website Color Scheme
:: 3 Logo Sketches
LOGO
:: Create Vector Logo in Ps or Ai
:: PNG, JPG, or GIF
:: Save for Web…
IMAGE PROCESSING
:: Image Sizing & Cropping
:: Adjust image appearance
:: Name Image Layers
FROM WIREFRAME TO MOCK UP
::
::
::
::
Save Wireframe as Mock Up
Move Images to Mock Up
Apply Clipping Mask to Images
Properly name image layers
1
artC301
COMPUTER GRAPHICS III
CLASS NOTES
FOLDER STRUCTURE REVIEW
Sample of Folder & File Structure – Structures may vary per student
2
artC301
COMPUTER GRAPHICS III
CLASS NOTES
HOMEWORK 2 PRESENTATIONS
:: PSD Wireframe Critique
o Explain what each box represents
o Will you have a simple text menu or a drop-down menu
o Describe your Image Gallery
:: Website Color Scheme
o Quick justification for color choices
:: 3 Logo Sketches
o
o
o
o
o
o
Do you believe your logo is unique, or similar to an existing one?
Do you believe your logo is memorable?
Does your logo represent an idea, person, place, or thing?
Does your logo represent you?
What do you want your audience to feel when they see it?
Would you trust this logo if you saw it in a magazine?
NOTES:
3
artC301
COMPUTER GRAPHICS III
CLASS NOTES
LOGO
:: Create Vector Logo in Ps or Ai
DEMO (Based on Sketches)
o
o
o
o
Concentric Circles (Illustrator)
Type on a Path (Illustrator)
Create Outlines from Text (Illustrator)
Export .ai to .psd (Illustrator to Photoshop)
:: PNG, JPG, or GIF
o
PNG – Best for Curved Images with Transparent Background
Portable Network Graphics (.png), has 16 million colors and allows an image file to export with
an alpha channel. Use .png (PNG-24) when saving images with curved, angled, and irregular
edges. The alpha channel (transparency) will allow your image to display flawlessly on any
background
o
JPG (or JPEG) – Best for Photos and Images with 90 degree edges
Joint Photographics Expert Group (jpeg) has 16.7 million colors and does not support an alpha
channel. Use .jpg when saving photo images with 90 degrees edges. Irregular edged images
will export with a white box background.
o
GIF – Best for Animated Images and Shapes with limited color + 90 degree edges
Graphics Interchange Format (gif) has up to 256 colors and supports an alpha channel. Use .gif
when saving shapes with limited color + 90 degrees edges, and animated images.
NOTE: Irregular-edged images will export with a transparent background; however, the edges
may appear extremely jagged. Opt for .png if this occurs.
:: Save for Web…
o Save for Web… optimizes your image for the web
o This option allows you to customize compression for desired quality & web loading times
o To Save Images for the Web
a. Go To Menu Bar > File > Save for Web…
b. Choose file type & options
c. Click Save
d. Save in Your Student Folder > Your Website Folder > public_html > images folder
4
artC301
COMPUTER GRAPHICS III
CLASS NOTES
IMAGE PROCESSING
:: Image Sizing & Cropping (in Photoshop)
o Determine Size of Image
Use your Wireframe PSD assignment to determine the size of your web images
ASK YOURSELF:
1. Is it a featured image (Header image at top of page or full-size image of artwork?)
If so, ensure your digital art is high-resolution and printed art is scanned in high-resolution.
The minimum width of your webpage will be 1366 pixels wide.
For a header image or video poster*: set-up a document 2000 pixels minimum width
For a large gallery image: set-up a document 1000 pixels in width
*A video poster is an image serving as a placeholder if videos are slow to load or
not supported in certain browsers and devices.
Avoid enlarging small images in Photoshop to fit the minimum width. This will create pixilation.
2. Is it a thumbnail (Used to link to a large image or another webpage?)
For Image:
Pick the most interesting part of your image
Use the Crop Tool (To crop an image) or Clipping Mask (to bound image inside of a shape)
Large images may be resized to a smaller image; however, you may need to adjust the contrast
or sharpen attributes to maintain a crisp image.
3. Is it a button image (Custom icon to trigger actions?)
For Navigation or Functions (i.e. play button for video, arrows for navigation, etc):
Ensure your buttons are vector objects.
Vectors are crisp and sizeable in browsers.
You may create your own vector buttons with the pen tool in Photoshop or Illustrator.
For web vectors in Photoshop, use the Custom Shape Tool (U – last option)
For preset characters on Mac Use the Character Viewer, or switch the font to Lucida Grande
For preset buttons & icon characters go to: http://copypastecharacter.com/ (Dreamweaver only)
5
artC301
COMPUTER GRAPHICS III
CLASS NOTES
:: Adjust image appearance
It is best to adjust an image’s appearance with non-destructive methods.
Non-destructive methods preserve the integrity of your original image.
Two easy methods to adjust your image’s appearance non-destructively in Photoshop are:
1. Adding adjustment layers above the original layer or
2. Converting your image layer to a smart object and adding a smart filter to the layer.
FOR ADJUSTMENT LAYERS ::
NOTE: Adjustment layers, by default, adjust all the layers appearing below them in the layers panel.
To affect ONLY the layer directly below the adjustment layer:
Select the adjustment layer > Right-Click >Choose Create Clipping Mask
o
Boost/Decrease Brightness & Contrast
a.
b.
c.
d.
e.
Go to the image layer
Click New Fill and Adjustment Layer icon
Choose Brightness/Contrast…
Adjust the Levels to your liking
Accept the Changes and Save your file
OR
a.
b.
c.
d.
e.
Go to the image layer
Click New Fill and Adjustment Layer icon
Choose Levels…
In the Preset drop down menu, choose each option and view the effects on the image
Accept the Changes and Save your file
o Change Hue & Saturation
a.
b.
c.
d.
e.
e.
Go to the image layer
Click New Fill and Adjustment Layer icon
Choose Hue/Saturation…
You may manipulate all colors (Master) OR select each color mode in the drop down list
Adjust the hue and saturation levels to your liking
Accept the Changes and Save your file
6
artC301
COMPUTER GRAPHICS III
CLASS NOTES
o Create an Adjustment Pattern Layer with Blend Mode
a.
b.
c.
d.
e.
f.
g.
h.
i.
Go to the image layer
Click New Fill and Adjustment Layer icon
Choose Pattern…
Pick your Pattern of choice
Adjust the Scale to your liking
Accept the Changes
In the layers panel, go to the Blend Mode drop down list (SEE Diagram)
Choose a Blend Mode
Save your file
o Create a Custom Texture/Pattern Overlay
a.
b.
c.
d.
e.
f.
g.
h.
i.
Go to the image layer
Click New Fill and Adjustment Layer icon
Choose Solid Color… and Pick the color white
Create your own shapes/pattern by drawing with the color black
Ensure your custom shape/pattern layer is selected
Go to the Blend Mode drop down list > Choose Screen
Your image will be revealed through the black shape
To view the inverse, Hit Cmd+i
You may add a stroke and decrease the layer opacity to achieve a subtle effect
7
artC301
COMPUTER GRAPHICS III
CLASS NOTES
FOR ADDING FILTERS ::
CONVERT IMAGE LAYER TO SMART OBJECT:
1. Go to the Layers Panel, Right-Click the Image Layer > Convert to Smart Object OR…
2. Select the Image Layer > Click Layer Options Button
> choose Convert to Smart Object
o Add Blur
TILT-SHIFT* BLUR:
a.
b.
c.
d.
e.
f.
g.
Select the Image Layer
Go to Menu Bar > Filter > Blur > Tilt-Shift*
Click in area below the dotted line and activate Rotate symbol
Rotate the Tilt-Shift blur approximately 30 degrees
In the Blur Tools Panel/Tilt-Shift Section, Set the Blur to 3px
Set the Distortion to -100
In the Tool Options Bar, Click OK to commit the changes
*You may explore other Blurs and Options
o Add Lens Flare
a.
b.
c.
d.
Select the Image Layer
Go To Menu Bar > Filter > Render > Lens Flare
Adjust Brightness to Radial Button
Choose 50-300mm
o Add Lighting Effects
a. Select the Image Layer
b. Go To Menu Bar > Filter > Render > Lighting Effects
c. Experiment with the Lighting Effects tools by clicking on presets (i.e. spotlight, etc.), plus
clicking and moving the lighting controls located on the canvas.
:: Name Image Layers
1. Name all image layers according to function (logo.png, title-of-artwork.jpg,)
2. If your image has multiple filters and adjustment layers, create a folder that contains the
image layer PLUS all of its adjustments. Name The Group Folder according to its future
file type ( i.e. title-of-artwork.jpg, logo.png, animated-thumbnail.gif )
8
artC301
COMPUTER GRAPHICS III
CLASS NOTES
FROM WIREFRAME TO MOCK-UP
You will create your Photoshop Web Page Mock-Ups by completing the following steps:
:: Save Wireframe as Mock-Up
 Open Your wireframe.psd
 Save As… yourinitials_index.psd
:: Open color-scheme.psd
 Save As… color-palette.psd
 Merge Visible Layers
 Move to yourinitials_index.psd
a. Select the merged layer
b. Rename the layer color palette
c. Right-Click the color palette layer
d. Choose Duplicate Layer…
e. Optional (Erase copy from color palette copy)
f. In the Destination drop-down selection, Choose index.psd (This will send the layer to index.psd)
 In the index.psd file, resize the color-palette layer
 Place palette layer away from the center of canvas
 Use this layer as a color selector (using eyedropper tool)
:: Create Background Fill and Textures










Select the Background Layer and drag the Lock icon to the trashcan icon
Click New Fill and Adjustment Layer icon
Choose Solid Color… and Pick your color of choice
To add a pattern, Click New Fill and Adjustment Layer icon
> Choose Pattern…
Pick your Pattern of choice
Adjust the Scale to your liking
Accept the Changes
In the layers panel, go to the Blend Mode drop down list (SEE Diagram)
Choose a Blend Mode
Hold Shift, while selecting the background, fill, and pattern layer > Click the Layer Options Button
> New Group from Layers… > Name the Group BACKGROUND
 Save your file
9
artC301
COMPUTER GRAPHICS III
CLASS NOTES
:: Create Navigation
 Choose font, available on Mac, for nav menu text (Download custom/free use fonts for homework)
 Decide if you will use background colors, icons, text color rollover’s, etc.
 Organize text, Icons, background colors into group folders (SEE Image Below)
:: Stylize Text ::




Select colors, font, size, and spacing for your webpage text
Choose font available on Mac for class
For Homework, Download free use fonts at dafont.com, font squirrel.com, etc.
Test the fonts on your personal computer
10
artC301
COMPUTER GRAPHICS III
CLASS NOTES
:: Place Images in Mock-Up
 Open Your Image Files ( logo.png, header-images.jpg, footer-logo.png, about-me.jpg, …
 In each file, determine if you will move a group or layer to its new destination
 In each image file:
a. Right-Click the image layer or group
b. Choose Duplicate Layer…
c. Optional (Erase copy from the layer name)
d. In the Destination drop-down selection, Choose index.psd
:: Apply Clipping Mask to Images





In index.psd, use the Move Tool to position your image over its placeholder
In the layers panel, move the image layer ABOVE its placeholder image
Ensure the image layer is selected
Right-Click the image layer > Choose Create Clipping Mask
Choose the Move Tool, move the image layer position to your liking
:: Add Footer Navigation
 Choose background color (if applicable)
 Choose pattern (if applicable)
 Type text and copyright character from Character Viewer
:: Ensure All Layers are properly Named and Grouped





To simplify your Photoshop Life, assign all layers/groups to a larger group (where applicable)
HEADER :: Logo, Navigation, Header Image
CONTENT/SECTION :: Left Column, Right Column
FOOTER :: Footer Logo, Left Column, Middle Column, Right Column
BACKGROUND :: Background, Fill Layer, Patter Layer
11
artC301
COMPUTER GRAPHICS III
HW-3
CLASS NOTES
Homework
DUE :: 09.30
REVIEW ::
1. Class Notes
2. Mock-Up Video Tips
Title: Speed Art Web Design Mock Up in Photoshop:
By: ChimpDesign
Date: July 15, 2013
URL: http://youtu.be/htwI7U6kFGE
DO :
1.
2.
3.
4.
Research and Decide on Image Gallery Experience
Download free use fonts at (dafont.com or fontsquirrel.com)
Complete Homepage PSD
Sketch Your Supporting Page Ideas
SEE HOMEWORK PAGE FOR
COMPLETE DETAILS
BRING :: HW-3
1
2
Completed Homepage
Mock Up PSD
Sketches of Supporting
Pages in PSD
12