CLASS :: 05 10.09 2017 3 Hours HOMEWORK [ TURN-IN ] THE AGENDA PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Mock-Up? :: Color Scheme [from paletton.aco file // from Photoshop Swatches ] :: Download Fonts [from fontsquirel.com] :: Download Social Media Buttons [from social media brand assets OR developer tools] :: Screenshot Social Media Feeds, and Video Posters :: Treat Large Images in Photoshop [Manipulate Images for Hero Position, Slideshow, Thumbnails, etc.] PHOTOSHOP MOCK-UP :: Resave & Resize Wireframe as Photoshop Mock-Up :: Replace Placeholder Image Layers with Your Treated Images :: Change Default Colors Using your Color Scheme :: Change Font Face & Create Original Texts(copy) for your Text Layers 1
HOMEWORK [ TURN-IN ] Upload to Your Student Folder on the Comm Arts Server :: Photoshop Wireframe [PSD] :: Color Scheme PSD [.aco file], or [.png file], or.psd, Pick/Save As You Go :: Images you wish to use for your website: [ Photo, projects, or other best works ] Turn In Sketches :: Logo [version 1 Sketches] 2
MULTIMEDIA TOOLS :: CLASS NOTES PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Mock-Up? A Photoshop Mock-Up is: 1. The step in your website design process following the wireframe. 2. A visual depiction of your website s layout, plus: Theme (including font size, font color, letter spacing, color scheme, mood, button styles, etc.); & Featured Works, Logo, and other treatments (as defined by requirements) 3
:: Color Scheme [from paletton.aco file // from Photoshop Swatches ] Download Your Custom Color Swatch @ Paletton.Com: URL: http://paletton.com/ 1. Pick a scheme: OPTIONS: You may choose from monochromatic, 2-color, 3-color, 4-color, or Freestyle 2. Click TABLES/EXPORT 3. Click Color swatches 4. Export palette as a PNG image > Right-Click One of the Color Palette Images > Copy Image 4
Paste Into Photoshop 1. Ensure You Select The HEADER group (to place the palette above the Grouped Layers) 2. Go To Menu Bar > Edit > Paste OR [ Ctrl+V ] Rename The Pasted Layer palette 5
Use Palette To Choose Your Colors 1. Move Palette OFF canvas area 2. Go to Menu Bar > Image > Reveal All [to see your scheme] 3. When selecting a color > use eyedropper tool to click on color choice from your scheme 4. [ Save As You Go ] Each time you select a color [using color picker], you may click the Add to Swatches Button, to save your selection OR ensure the Show Recent Colors option is selected in the Swatches panel: In swatches panel, click options menu button > Select Show Recent Colors 5. When complete with mock-up > Delete color scheme layer, then > Go to Menu Bar > Image > Trim > OK OTHER OPTIONS FOR CREATING A COLOR SWATCH :: I. ACO Download.aco > Double-Click to Open in Photoshop > It will automatically load in Your Color Swatch Panel II. PSD FIGURE 1: Color Scheme NOTE: The #NUMBER-LETTER code combination, shown in the figure, is called hexadecimal code. This code is used to color the text and background color of specific web elements. [ Off Canvas Color Palette ] a. Create a.psd showcasing your color choices b. Place embedded [ File > Place Embedded ] scheme [.psd ] OFF canvas area c. Go to Menu Bar > Image > Reveal All [to see your scheme] d. Repeat Steps 3-5 III. Choose Colors, Then save them to Swatch as You Go [ SEE STEP 4 ] 6
:: Download Fonts [from fontsquirel.com] If you wish to have a non-default web font for your website, you may follow these steps:: Go to fontsquirrel.com Choose Your Font [ For most fonts, bold & italic variations must be downloaded as well ] Install the font on your local machine [ How to Install Fonts on Mac & PC ] 7
:: Download Social Media Buttons [from social media brand assets OR developer tools] Most social media sites provide designers access to brand assets [badges, buttons, etc.] Each site has a set of rules designers must follow to ensure copyright compliance is upheld. For the best results, download the.zip,.eps,.psd, or in some cases.png (choose largest) files. Inside of Your PSD folder, Save the social media brand assets (You may create a separate folder for storing social media buttons if you wish) facebook [URL]:: https://www.facebookbrand.com/ vimeo [URL]:: https://vimeo.com/about/brand_guidelines youtube [URL]:: https://www.youtube.com/yt/brand/using-logo.html Twitter [URL]:: https://about.twitter.com/company/brand-assets instagram [URL]:: https://www.instagram-brand.com/ behance [URL]:: https://www.behance.net/dev/api/brand :: Screenshot Social Media Feeds, and Video Posters If you plan to include a video or social media feed (i.e. Twitter Timeline, or Instagram Gallery Preview) in your website, you may screenshot your feed or video poster, then include it in your mock-up Basic Rules for Screen Shots: Go to the Window with desired image > FOR PC USERS: [Print Screen Button] (PC) & Paste in.psd OR FOR MAC USERS: Full Screen Shot :: [Shift+command+3 > Go to Your Desktop > Locate the Screenshot > Right-Click Screenshot > Open With Photoshop CC Selection Shot :: [Shift+command+4 > then Drag over part of screen you wish to capture ] > Go to Your Desktop > Locate the Screenshot > Right-Click Screenshot > Open With Photoshop CC NOTE: You may use the screenshot method to capture a single frame from a video (for video poster) For Instagram Gallery Feed Representation: Go to: http://websta.me/tools/ Fill in Form & include @username Click Preview Button Screenshot the feed For Twitter Timeline Widget Representation: Go to: https://twitter.com/settings/widgets/new/user?user_id=2244994945&ref_src=twsrc%5etfw Fill in Form & include @username Click Preview Button Screenshot the timeline 8
:: Treat Larger Images in Photoshop [Manipulate Images for Hero Position, Slideshow, Thumbnails, etc.] It is good practice to treat featured images in a separate Photoshop document (.psd). Working your large image in a separate.psd will allow you to duplicate the image and use it elsewhere, while maintaining a large scale/high-resolution image for multiple digital outputs. In your.psd, you may add filters, adjustment layers, and additional treatments to your large image. Once complete, all relevant layers to the image (including the image) may be grouped and named filename.fileextension i.e. hero.jpg or logo.png [SEE Naming Layers and Groups]. After grouping, you may duplicate and move the group folder to the mock-up document. In the new location, you may convert the group to a smart object, resize the object, and replace its placeholder image within the mock-up.psd IMAGES TREATMENTS: 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: Adding adjustment layers above the original layer or Converting your image layer to a smart object and adding a smart filter to the layer. Duplicating the Original Layer > Edit on duplicated 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 Boost/Decrease Brightness & Contrast :: a. Go to the image layer b. Click New Fill and Adjustment Layer icon c. Choose Brightness/Contrast d. Adjust the Levels to your liking e. Accept the Changes and Save your file 9
OR a. Go to the image layer b. Click New Fill and Adjustment Layer icon c. Choose Levels d. In the Preset drop down menu, choose each option and view the effects on the image e. Accept the Changes and Save your file Change Hue & Saturation :: a. Go to the image layer b. Click New Fill and Adjustment Layer icon c. Choose Hue/Saturation d. You may manipulate all colors (Master) OR select each color mode in the drop down list e. Adjust the hue and saturation levels to your liking e. Accept the Changes and Save your file Create an Adjustment Pattern Layer with Blend Mode :: a. Go to the image layer b. Click New Fill and Adjustment Layer icon c. Choose Pattern d. Pick your Pattern of choice e. Adjust the Scale to your liking f. Accept the Changes g. In the layers panel, go to the Blend Mode drop down list (SEE Diagram) h. Choose a Blend Mode i. Save your file Create a Custom Texture/Pattern Overlay :: a. Go to the image layer b. Click New Fill and Adjustment Layer icon c. Choose Solid Color and Pick the color white d. Create your own shapes/pattern by drawing with the color black e. Ensure your custom shape/pattern layer is selected f. Go to the Blend Mode drop down list > Choose Screen g. Your image will be revealed through the black shape h. To view the inverse, Hit Cmd+i i. You may add a stroke and decrease the layer opacity to achieve a subtle effect 10
MULTIMEDIA TOOLS :: 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 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 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 11
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. HERO IMAGES: A hero image is a large feature image highlighting an important area of your website. (typically the homepage on top & centered). The hero image should be engaging and provide insight to your website s goal, purpose, and theme. Minimum Dimensions: 2200px X 1602px (Use high resolution photos/images) File Type:.jpg,.png, sometimes gif* (if file/storage size is low) Save for Web(legacy): Go to Menu Bar> File > Export > Save for Web >Choose Format & options > Save NOTE: For vector-based files, you may change the file dimensions: Go to Menu Bar > Image > Image Size > Change Width & Height > [Click] OK VIDEO POSTERS: A video poster is an image serving as a placeholder if videos are slow to load or not supported in certain browsers and devices. You may create your own poster for the video or screenshoot (image capture) a frame from your movie. [SEE Social Media Feeds and Video Posters ] Minimum Dimensions: Same dimensions as Video File Type:.jpg,.png,.gif GALLERY IMAGES [OVERVIEW]: For a large gallery(best works) image(s): Your thumbnails will link to a larger image on another page. Determine the size of your image(s) : 1900pixels or less Save for Web [File> Export> Save for Web> Choose options> Save] NOTE: These images may be duplicated, sent to your final mock-up, and scaled down for presentation purposes. THUMBNAIL IMAGES [OVERVIEW]: For thumbnail image(s): Your thumbnail images are previews to your large gallery images. It may simply be a scaled down version OR a revealed portion of your full-scale gallery image. Minimum Dimensions: Based on Layout & multiple screen size layouts. Your layout may require a larger scale thumbnail than depicted in your mock-up. For this reason, keep a master file of thumbnails in a separate document. Though larger, thumbnails should maintain the same proportions/ratios as in the mock-up. 12
PHOTOSHOP MOCK-UP :: Replace Placeholder Image Layers with Your Treated Images STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Rename Your Wireframe yourinitials_mockup.psd 1. File > Save As > yourinitials_mockup.psd Resize Your Document [for large image processing intended for large monitors] After resaving your document, Edit your Image size: 1. Go to File > Image > Image Size 2. Ensure the Link icon is selected: 3. Change the width to 2300 Pixels [The Height will automatically adjust to the correct/proportioned measurement if the Link icon was previously selected ] 2 Open large hero image in Photoshop CC, and treat the image (if needed) a. Open the file you wish to use in the hero position of your website. b. Save As hero.psd c. Add filters and adjustments (if needed) d. Prep layers and Send to Your mockup.psd: 13
In the hero.psd, Prep the image to move to mockup.psd 1. Select All relevant layers to the hero image: 2. Group the Layers [Ctrl+G]: 3. Right-Click hero.jpg [or your group folder name] 4. Choose Duplicate Layer or Duplicate Group 5. In the pop-up, set the destination to your mockup.psd: 6. Click Tab [or open] yourintials_mockup.psd 7. Move hero.jpg group folder to proper location: [below placeholder for the hero image] 8. Right-Click hero.jpg > Convert to Smart Object 9. Delete the placeholder X image layer: 10. Ensure hero image is clipped to shape below: Right-Click hero.jpg Smart Object Layer > Choose Create Clipping Mask 14
3 Replace All X Layers in Your Mock-Up, with Images you wish to use in Your Website 1. Locate the Placeholder X image you wish to replace (We will locate the one inside of Works One > thumb1.jpg group) 2. Click The delete/backspace button 3. Now You should just see the bg_thumbnail layer inside your thumb1 group: 4. Place the embedded image you wish to use into the Photoshop Document: 5. Apply a clipping mask to the layer: a. Click on the image layer> Right-Click > Create Clipping Mask b. Rename the group an image name of your choice (preferably related to the image: REPEAT STEPS FOR ALL OTHER X PLACEHOLDERS 4 Save Document [Ctrl+S] [cmd+s] 15
:: Add Social Media Buttons :: Change Default Colors Using your Color Scheme :: Change Font Face & Create Original Texts(copy) for your Text Layers 16
HW-6 Homework DUE :: 10.16 REVIEW :: 1. Class Notes 2. Watch Video Tutorials: Clipping Masks Filters & Adjustments How to Create A Logo The Pen Tool DO :: Complete Your Photoshop Website Mock-Up SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: 1 Mock-Up [Homepage] 17