MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 06

03.01

2019 3 Hours

“THE” AGENDA

HOMEWORK [ TURN-IN ]

P-2 [ COMPLETE ] :: Upload to Your Student Folder on the Comm Arts Server

:: Adobe Illustrator (.ai) Logo :: Ensure Facebook Cover Video Is Available [ For Screen Shot in Mock-Up] :: Ensure Your Best Works/Images for Website Are Available [ For Mock-Up ] PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Wireframe? [View Choices] :: 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 of Social Media Feeds and Video Posters :: Treat Large Images in Photoshop [Manipulate Images for Hero Position, Slideshow, Thumbnails, etc.]

PHOTOSHOP MOCK-UP :: Download Wireframe Zip File :: 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

MULTIMEDIAWEBDESIGN CLASSNOTES

2

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

:: Adobe Illustrator Logo :: Ensure Facebook Cover Video Is Available [ For Screen Shot in Mock-Up] :: Ensure Your Best Works/Images for Website Are Available [ For Mock-Up ]

MULTIMEDIAWEBDESIGN CLASSNOTES

3

PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Wireframe?

A Photoshop Wireframe:

Depicts your website’s layout, focusing on: Content placement, margins, padding, & functional concepts (i.e. a drop down menu vs. a horizontal navigation bar). “X”s function as image placement holders. Text may be represented with lines or lorem ipsum (place holder text)

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

MULTIMEDIAWEBDESIGN CLASSNOTES

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)

MULTIMEDIAWEBDESIGN CLASSNOTES

5

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

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

[ ON PERSONAL COMPUTER ] DOUBLE-CLICK and Launch In Photoshop OR 5-A. Save .aco inside of Photoshop’s Color Swatches Folder

MULTIMEDIAWEBDESIGN CLASSNOTES

6

OTHER OPTIONS FOR CREATING A COLOR SWATCH ::

1. [ Off Canvas Color Palette ] a. Create a .psd showcasing your color choices b. Place scheme OFF canvas area > Go to Menu Bar > Image > Reveal All [to see your scheme] c. When selecting a color > use eyedropper tool to click on color choice from your scheme d. 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::

1. Go to fontsquirrel.com 2. Choose Your Font [ For most fonts, bold & italic variations must be downloaded as well ] 3. Install the font on your local machine [ How to Install Fonts on Mac & PC URL:: https://www.dafont.com/faq.php#win ]

MULTIMEDIAWEBDESIGN CLASSNOTES

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 of Gallery Plug-ins, 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 Colorbox jQuery Plug-In Representation: In wireframe1.psd and wireframe2.psd, there is a group folder named “FULLVIEW” (inside of the WORKS ONE folder group). You may customize the look to fit your site’s theme.

To View the gallery demo, VISIT the colorbox plug-in reference page: URL: http://www.jacklmoore.com/colorbox/ NOTE: The colorbox gallery is customizable, but you may screenshot the theme you wish to use

MULTIMEDIAWEBDESIGN CLASSNOTES

8

For Instagram Gallery Feed Representation: Go to: https://widgets.websta.me/

1. Log In to Instagram 2. Authorize Websta to access your Instagram Account 3. Fill in Form with Your E-mail Address

(Instagram sends an account verification) 4. Open Your E-mail and Click the Verification Link 5. Return to Websta & Fill Out The Customization Form to

Design Your Instagram Grid Feed 6. Screenshot the Feed

For Twitter Timeline Widget Representation: Go to: https://publish.twitter.com/# 1. Fill in Text Form Field with Your Twitter URL

(https://www.rockstargames.com/) OR @username 4. Click Embedded Timeline 5. Click “set customization options” 6. Choose your options

7. Screenshot Your Twitter Timeline

MULTIMEDIAWEBDESIGN CLASSNOTES

9

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

MULTIMEDIAWEBDESIGN CLASSNOTES

10

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

MULTIMEDIAWEBDESIGN CLASSNOTES

11

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

MULTIMEDIAWEBDESIGN CLASSNOTES

12

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: Go to Menu Bar > File > Export > Save for Web (legacy), Enter Save As options, Click 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 Screenshot of Gallery Plug-ins…]

Minimum Dimensions: Same dimensions as Video File Type: .jpg, .png, .gif

GALLERY IMAGES [OVERVIEW]:

For a large gallery(best works) image(s): Determine the size of your image(s) in full browser view or if you are using a jQuery gallery, calculate the required dimensions of single or slideshow images… Save for Web: Go to Menu Bar > File > Export > Save for Web (legacy), Enter Save As options, Click 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.

MULTIMEDIAWEBDESIGN CLASSNOTES

13

PHOTOSHOP MOCK-UP

:: Download & Choose Wireframe

STEP DESCRIPTION ACTION

1 Download Wireframe Zip File

URL: http://iris.nyit.edu/~dmyrick/dgim759/WIREFRAME_310-759_2019.psd.zip

2 VIEW CANVAS & LAYERS PANEL IN YOUR WIREFRAME

MULTIMEDIAWEBDESIGN CLASSNOTES

14

MOCK-UP EXAMPLE

ADD Your Logo, Feature Video Poster Image and change your hamburger menu (if desired) NOTE: You may substitute the hamburger menu with your logo.

ADD Background Images to Image and Video Elements NOTE: You may substitute with your own custom icons. Replace Text with Your Own Custom Titles and Captions

ADD Your “Gif Face” Project to Your Profile Pic Element Replace the Text with Your Own Name/Business Name Replace the Lorem Ipsum (placeholder text) with Your Own Bio. You may Change the color of Text and the Background Colors NOTE: You may substitute with your own custom icons. Replace Text with Your Own Custom Titles and Captions ADD Social Media Feed Screenshot to the “SOCIAL” Element. ADD a Background Image to Social Element NOTE: You may use any social media feed of Choice SEE Embed Social Media Page

Replace the Logo Placeholder with Your Own Logo Replace Social Media Button Placeholders with Official Social Media Badges/Icons

MULTIMEDIAWEBDESIGN CLASSNOTES

15

:: Replace Placeholder Image Layers with Your Treated Images

SEE VIDEO TUTORIAL FOR HEADER:

URL: http://iris.nyit.edu/~dmyrick/dgim759/video/DGIM759_MockUp_HEADER.mp4

SHORTCUT KEY STEP DESCRIPTION ACTION

[Win] [Mac]

1

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

2

Place Hero Image into Mockup

1. Locate & Unlock the HEADER group 2. Open the placeholder_hero.png group 3. Select the Rectangle 1 layer 4. Go To Menu Bar > File > Place Embedded… > filename.jpg 5. Delete the placeholder X image layer:

6. Ensure hero image is clipped to shape below: Right-Click filename.jpg > Choose Create Clipping Mask

MULTIMEDIAWEBDESIGN CLASSNOTES

16

7. Free Transform (CTRL+T, then SHIFT + DRAG) the hero image if resizing is needed

2a. If you are treating your image in another .psd document and wish to move it over to your mock-up, following the instructions to the right

In the hero.psd, Prep the image to move to mockup.psd

1. Select All relevant layers to the hero image:

2. Rename The Layer “hero” 3. Right-Click, Convert To Smart Object

4. Right-Click hero Smart Object Layer 5. Choose Duplicate Layer… or Duplicate Layer…

6. In the pop-up, set the destination to your mockup.psd:

NOTE: Your pop-up may be titled Duplicate Layer instead of Group

7. Click Tab [or open] yourintials_mockup.psd

8. Move hero to proper location (if needed): [below placeholder for the hero image]

9. Delete the placeholder X image layer:

MULTIMEDIAWEBDESIGN CLASSNOTES

17

10. Ensure hero image is clipped to shape below:

Right-Click hero.jpg Smart Object Layer > Choose Create Clipping Mask

3

Replace placeholder for logo with your own

1. Locate placeholder_logo layer 2. Select the layer 3. Place your logo in the document

File > Place Embedded… > Browse and open your logo.png

4. DELETE the placeholder_logo layer

4

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

MULTIMEDIAWEBDESIGN CLASSNOTES

18

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

SEE VIDEO TUTORIAL FOR HEADER:

URL: http://iris.nyit.edu/~dmyrick/dgim759/video/DGIM759_MockUp_WORKS.mp4

ABOUT SECTION

SEE VIDEO TUTORIAL FOR HEADER:

URL: http://iris.nyit.edu/~dmyrick/dgim759/video/DGIM759_MockUp_ABOUT.mp4

FOOTER

SEE VIDEO TUTORIAL FOR HEADER:

URL: http://iris.nyit.edu/~dmyrick/dgim759/video/DGIM759_MockUp_FOOTER.mp4

MULTIMEDIAWEBDESIGN CLASSNOTES

19

Homework HW-6

DUE ::03.08 REVIEW ::

1. Class Notes

2. Mock-Up Video Tutorials

DO ::

Complete Your Photoshop Website Mock-Up

Complete Buttons for Mock-Up [ If different from default buttons/icons ]

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING ::

1 Mock-Up [Homepage]

2 Vector Buttons (Optional)