CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469) AGENDA: Homework Review: Website Logo (Save As: YourInitials_logo.psd ) Photoshop Lesson 6: Start Midterm Set-Up OBJECTIVE: Set-Up Photoshop Document Measurements and Content Placement TASKS: I. Create New Photoshop Document with Web Measurements (Save As: YourInitials_mockup.psd ) II. Place Logo III. Create Top Navigation (Shape & Text) IV. Create Bottom Navigation Dreamweaver Preamble: The Set-Up - Files, Folders, & Site Definition OBJECTIVE: Learn the basics of organizing and uploading files to a live server TASKS: I. File & Folder Structure Set Up II. Define A Website III. Upload Page to Iris Server via FTP (Save As: index.html ) 1
Photoshop Lesson 6: Start Midterm Mock-Up Set-Up OBJECTIVE: Set-Up Photoshop Document Measurements and Content Placement STEPS FOR CREATING A WEBSITE SIMPLIFIED: Brainstorm :: Determine Purpose of Site, Target Audience, Theme, Color Scheme Sketch :: Placement of logo, navigations, images, videos, icons, buttons, etc. Consider :: Fonts, flow of content, usability for site visitor, and call to action Prepare Mock-Ups in Photoshop :: Include images, media placeholders, links colors, etc Prepare Content for Web Production :: Save images, media, & documents in proper location Design A Wireframe :: Skeleton layout of boxes coded in HTML & previewed in a browser Web Design :: Add copy [text, images, media, hyperlinks] and style properties to wireframe Testing :: Alpha Internal Testing Beta Client Testing Website Launch :: All the world may view your content TASKS: I. Create New Photoshop Document with Web Measurements (Save As: YourInitials_mockup.psd ) a. When designing for the web, consider the screen size of MOST users around the world (View 2014 Stats Here). Create a new document :: Width: 1366px Height: 768px Turn on Rulers (Ctrl + R), and ensure the units are pixels (Right-Click Ruler > Choose Pixels) b. Create a New Fill Layer for Your Background: Go to bottom of Layers Panel > Click > Choose Solid Color or Gradient and pick your color of choice c. (If Desired) Create a New Fill Layer Pattern: Go to bottom of Layers Panel > Click > Choose Pattern NOTE: Experiment with Different Patterns and Scale. You may click the cogwheel (SEE BELOW) for different pattern options. You may also select a different Blend Mode and/or Opacity for the Pattern layer to achieve your desired effect. d. ORGANIZE: Place your Solid Color/Gradient plus Pattern Layer (if applicable) inside of a Group Folder: Hold Shift + Select the 2 layers, Click the Layer Options Button > New Group from Layers > Name: BACKGROUND > Click OK e. Save File As: YourInitials_mockup.psd 2
II. Place Logo a. Open your logo.psd file in Photoshop Go To File > Open > Browse to your File > Click Open Save for Web > YourInitials_logo.png OR.jpg (if rectangle or square background) b. If you only have one layer in your logo document, skip to step c. If you have more than one layer in your logo document, it is necessary to create a New Group from Layers. Name the group LOGO. c. Move the LOGO Layer to your mockup.psd document: 1. Right-Click the LOGO Layer or LOGO Group > 2. Choose Duplicate Layer or Duplicate Group > 3. Save As: LOGO 4. In Destination Section, next to Document: Choose mockup.psd from the drop-down 5. In the Canvas window, click the mockup.psd tab. Notice your LOGO Layer or Group (Folder) is now in your mockup Photoshop document. d. Ensure your LOGO Layer and Move Tool (V) are selected. Move your LOGO to the desired location. e. Drag guides from the X and Y axis to form a box around your logo: 1. Hover over X axis ruler, Click + Hold Left Mouse Button, Drag Guide down to top of logo. 2. Repeat step for bottom of logo. 3. Hover over Y axis ruler, Click + Hold Left Mouse Button, Drag Guide to left of logo. 4. Repeat step for right of logo f. Create Center Line Guides: 1. Go to Menu Bar > View > New Guide > Orientation: Vertical > Position: 50% 2. Go to Menu Bar > View > New Guide > Orientation: Horizontal > Position: 50% g. Lock Guides: 1. Go to Menu Bar > View > Lock Guides NOTE: To Hide/Show guides, Click Ctrl + ; III. Create Top Navigation (Shape & Text) a. Create Navigation Based on Your Sketches 1. Choose Layout of Navigation Menu 2. Coose Background Color of Menu Text/Buttons (if applicable) 3. Choose Font Style and Color 4. Choose Hover State Font and/or Background Color b. See DEMO for Horizontal menu c. See DEMO for Vertical menu NOTE: You may apply text shadows & outlines to your text, if it strengthens your design. 3
GENERAL RULES FOR CREATING NAVIGATION TEXT/BUTTONS IN PHOTOSHOP: 1. Create Original Background Shape (if applicable) 2. Duplicate Background Shape & Change color for Rollover 3. Name the Layers Accordingly: MENUBOX Layer Created First Duplicate of MENUBOX with Rollover Color of Choice 5. Create an Original Text Layer 6. Duplicate Text & Change the color for Rollover 7. Name the Layers Accordingly: HOME Text Layer Created First Duplicate of HOME Text Layer with Rollover Color of Choice 8. Arrange Layers Accordingly: 9. Create A New Group from the ROLLOVER Layers: Step 1: Hold Shift + Highlight HOME ROLLOVER and MENUBOX ROLLOVER Layers Step 2: Click > Layer Options Button + Choose New Group From Layers Step 3: Name the Group: ROLLOVER 4
10. Create A New Group from the ROLLOVER Group plus the HOME and MENUBOX Layers: NOTE: Now you should have Two Groups in Your Layers Panel: NAV HOME (on top) and BACKGROUND (on bottom) Step 1: Hold Shift + Highlight - ROLLOVER Group - HOME Text Layer and - MENUBOX Layer Step 2: Click > Layer Options Button + Choose New Group From Layers Step 3: Name the Group: NAV HOME NOTE: You may name this Group anything you wish. I chose this name to :: 1. Indicate the group contains Navigation content 2. To inform me which menu button is contained within this group 11. Duplicate NAV HOME: (Right-Click > Duplicate Group ) 12. RENAME: NAV WORKS and Click OK 13. Choose Move Tool and move NAV WORKS to desired spot 14. Open the NAV- WORKS Group and: a. Click on the HOME Text Layer b. Select the Text Tool (T), Click Cursor WITHIN Existing Text, and Change Home to Works c. Open the ROLLOVER Group d. Click on the HOME ROLLOVER Layer e. Select the Text Tool (T), Click Cursor WITHIN Existing Text, and Change Home to Works 15. Collapse the NAV- WORKS Group and Repeat steps 10-13 for remaining menu buttons. 16. Save Your File (Ctrl + S) 5
IV. Create Bottom Navigation Your top Navigation is typically fancy and appealing to your visitors. Let s call it top shelf. On a typical site, the top menu may have animation, icons, mega drop down menus, etc. The Navigation appearing at the bottom of most websites is the footer navigation menu. It is a practical list of pages you want your visitor to visit. It is your trusty backup if the top shelf is out of one browser s league. In addition to a backup website menu, the footer typically contains copyright information, a business website URL, terms of use, contact info, and more. Today you will complete the following for your footer: 1. A small version of your logo 2. Back up menu with links to your main pages: HOME (ABOUT if applicable) WORKS CONTACT 3. 2014 or Copyright 2014 To Create Symbol: MAC Users :: Hold Alt + G, then release Alt PC Users :: Hold Alt + 0169 (on keypad only), then release Alt 4. iris.nyit.edu/~nyitusername Social Network Buttons may be added by accessing your favorite social media s development tools page. Each site varies. Further instruction will be given next week. 6
Dreamweaver Preamble: The Set-Up - Files, Folders, & Site Definition OBJECTIVE: Learn the basics of organizing and uploading files to a live server TASKS: I. File & Folder Structure Set Up Below is a basic file and folder set-up for your website. The top folder public_html is the name required by NYIT s Iris Server to locate your homepage. The code_snippets is where you will save and grab code (shortcuts) for your web projects. The images folder is where ALL of your image assets from your mock-up will be saved. The remaining files are.html. The about, contact, index, skills, and works.html webpages will make up your website. The index.html page = Your Homepage = ALL browsers look for the index.html when visiting a websites URL Address. Type in www.amazon.com/index.html. Notice you arrived to its home 1. In Windows Explorer, Browse to your Student Folder 2. Inside the student folder create a New folder called public_html 3. Open the public_html and create a New folder called code_snippets. 4. Go back inside your public_html folder and create a New folder called images 5. Copy YourInitials_logo.png to your images folder 7
II. Define A Website DEFINITION: Define A Site: Establish/reestablish a root folder and file structure within Dreamweaver Defining a site enables Dreamweaver to: organize files based on your root folder, update multiple pages based on your changes, and synchronize your local files with the remote (live) server. STEP 1. Go to Menu Bar > Site > New Site 8
STEP 2. Fill in text fields a. Site Name: Name of Your Choice (Does not have to match your root folder name). The Site Name, in this instance, is only used by Dreamweaver to distinguish one site from another. b. Local Site Folder: Click the folder to the right of the text field and browse to your website folder: StudentFolders> YourName > public_html NOTE: Ensure your folder name AND your website name contains NO SPACES or SPECIAL CHARACTERS c. Click Select 9
STEP 3. Set-Up your FTP connection a. Locate and click Servers option (in the left column of pop-up window) b. Click the + button located below the Name column 10
STEP 4. Fill in the required text fields [FOR PC/WINDOWS]: a. Server Name: iris b. Connect using: FTP c. FTP Address: iris.nyit.edu d. Port: 21 e. Username: SAME AS YOUR NYIT MAIL USER NAME f. Password: SAME AS YOUR NYIT MAIL PASSWORD g. Check Save checkbox (UNCHECK BEFORE LEAVING CLASS) h. Click Test button 11
>> ------- SKIP THIS STEP IF YOU HAVE A PC or PHOTOSHOP CS6/CC ON MAC ------- >> STEP 4. [FOR MAC/ADOBE CS3]: Fill in the required text fields a. Access: FTP b. FTP Host: iris.nyit.edu c. Host Directory: public_html/ d. Login: SAME AS YOUR NYIT MAIL USER NAME e. Password: SAME AS YOUR NYIT MAIL PASSWORD f. Check/uncheck Save checkbox (Based on your preference) g. Check Use passive FTP checkbox h. Click Test button 12
STEP 5. If the test goes well, the following pop-up message will appear: Dreamweaver connected to your Web server successfully a. Click OK b. Click Save in Basic form window c. Click Save in Site Setup window 13
III. Upload Page to Iris Server via FTP a. Create a New HTML 5 Document: 1. File > New > Blank Page > Page Type: HTML > Layout: None > DocType: HTML 5 2. Place Mouse after <title> and before </title>, then Click + highlight default text 3. Type: Your Website Name Home 4. Place Mouse after <body> and before </body>, then Click Left Mouse Button & Hit Return 5. Type: Hello World! 6. Save As: Browse to public_html folder, Save As: index.html 7. File > Preview in Browser > Chrome NOTE: This is a preview of your site in a local browser. Next we re doing it Live!!!! b. Go to Your Local Files Panel (F8 to toggle on/off) c. Click button to Expand view of local and remote files d. In the toolbar, Click Connect to Remote Server (iris) button The remote server (iris) files will appear on the left. Your local (computer) files appear on the right. e. Upload your files to the live server: In local file view, Click public_html folder Go to Files toolbar, Click the up arrow Do not put dependent files on your server (Click No) Do not Update links (if Dreamweaver asks you) Open a browser window and type your new web address (URL): http://iris.nyit.edu/~username YOUR SITE IS ALIVE! f. View your logo on the live server: http://iris.nyit.edu/~username/images/yourinitials_logo.png 14