:: MULTIMEDIA TOOLS :: CLASS NOTES

1

CLASS :: 05

03.16

2018 3 Hours

“THE” AGENDA

HOMEWORK [ TURN-IN ]

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

2

HOMEWORK [ TURN-IN ] Upload to Your Student Folder on the Comm Arts Server

:: Images you wish to use for your website: [ Photo, projects, or other best works ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

3

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)

:: MULTIMEDIA TOOLS :: CLASS NOTES

4

:: 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 Photoshop color swatch (ACO)

:: MULTIMEDIA TOOLS :: CLASS NOTES

5

[ ON NYIT COMPUTER ] 5. Save .aco inside of Photoshop’s Color Swatches Folder [ test required ]

1. Double-Click/Open the .aco file 2. Your Files may automatically load into the Swatches Panel 3. To Open the Panel: Go to Menu Bar > Window > Swatches 4. Your colors should be added to the bottom of the Swatch Colors:

[ ON PERSONAL COMPUTER ] 5-A. Save .aco inside of Photoshop’s Color Swatches Folder

:: MULTIMEDIA TOOLS :: CLASS NOTES

6

OTHER OPTIONS FOR CREATING A COLOR SWATCH ::

1. [ Off Canvas Color Palette ] a. Create a .psd showcasing your color choices b. Place embedded [ File > Place Embedded ] scheme [.psd or .png ] OFF canvas area c. Go to Menu Bar > Image > Reveal All [to see your scheme] d. When selecting a color > use eyedropper tool to click on color choice from your scheme e. When complete with mock-up > Delete color scheme layer, then > Go to Menu Bar > Image > Trim… > OK

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.

2. [ 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

:: 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 ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

10

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. Select the Image Layer b. Go to Menu Bar > Filter > Blur > Tilt-Shift* c. Click in area below the dotted line and activate Rotate symbol d. Rotate the Tilt-Shift blur approximately 30 degrees e. In the Blur Tools Panel/Tilt-Shift Section, Set the Blur to 3px f. Set the Distortion to -100 g. In the Tool Options Bar, Click OK to commit the changes *You may explore other Blurs and Options

Add Lens Flare ::

a. Select the Image Layer b. Go To Menu Bar > Filter > Render > Lens Flare c. Adjust Brightness to Radial Button d. Choose 50-300mm

:: MULTIMEDIA TOOLS :: CLASS NOTES

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.

:: MULTIMEDIA TOOLS :: CLASS NOTES

12

PHOTOSHOP MOCK-UP

SEE VIDEO TUTORIAL FOR HEADER:

URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_HEADER.mp4

:: Replace Placeholder Image Layers with Your Treated Images SHORTCUT KEY

STEP DESCRIPTION ACTION [Win] [Mac]

1

Rename Your Wireframe yourinitials_mockup.psd 1. File > Save As… > yourinitials_mockup.psd

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: In the hero.psd, Prep the image to move to mockup.psd

1. Select All relevant layers to the hero image:

:: MULTIMEDIA TOOLS :: CLASS NOTES

13

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

:: MULTIMEDIA TOOLS :: CLASS NOTES

14

3

Save Document [Ctrl+S] [cmd+S]

:: MULTIMEDIA TOOLS :: CLASS NOTES

15

:: Change Default Colors in Mock-Up Using your Color Scheme :: Change Font Face & Create Original Texts (copy) for your Text Layers :: Add Footer Logo & Social Media Buttons to Mock-Up

SEE TUTORIALS:

WORKS SECTION [With & Without

Caption Overlays]

SEE VIDEO TUTORIAL FOR WORKS:

WITHOUT OVERLAYS

URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_WORKS.mp4

WITH OVERLAYS URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_WORKS-

transparent_bg_4captions.mp4

ABOUT SECTION SEE VIDEO TUTORIAL FOR ABOUT:

URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_ABOUT.mp4

FOOTER

SEE VIDEO TUTORIAL FOR FOOTER:

URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_FOOTER_final-adjustments.mp4

:: MULTIMEDIA TOOLS :: CLASS NOTES

16

CHANGING COLORS/SWATCHES, OVERLAYS, & TEXT

SEE VIDEO TUTORIAL FOR FINISHING TOUCHES:

URL: http://iris.nyit.edu/~dmyrick/DGIM601-M01/videos/PSD_mockup_Changing-colors-w-swatch_overlays.mp4

:: MULTIMEDIA TOOLS :: CLASS NOTES

17

Homework HW-5

DUE :: 03.30 REVIEW ::

1. Class Notes

2. Watch Mock-Up Video Tutorials

DO ::

Complete Your Photoshop Website Mock-Up

Complete Buttons for Mock-Up

Sketch Ideas for Logo

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING ::

1 Mock-Up [Homepage]

2 Vector Buttons

3 Logo Sketches