Dreamweaver client pptx Rev 03222016 Dreamweaver Sites Start

  • Slides: 20
Download presentation
Dreamweaver – client. pptx Rev 03/22/2016 Dreamweaver Sites Start of your client site

Dreamweaver – client. pptx Rev 03/22/2016 Dreamweaver Sites Start of your client site

Approach Create a logo with. ai extension Size the logo Create a banner that

Approach Create a logo with. ai extension Size the logo Create a banner that includes the logo Add client links FTP all to net drive

Sites Do you have a site? Sites>Manage Sites We set them up early in

Sites Do you have a site? Sites>Manage Sites We set them up early in semester If it is there skip to the “typical Web site” Slide

Creating a new jma 260 site slso see introduction to Dreamweaver: 29_Jan Step o:

Creating a new jma 260 site slso see introduction to Dreamweaver: 29_Jan Step o: Be sure you have a Client and Client>Images folder on local drive and remote drive As child folders under JMA 260…. see next slide If don’t have one: Site>New Site Enter a name for your local site Browse to your JMA 260 folder:

 • Servers button next Click +

• Servers button next Click +

Fill out this form

Fill out this form

Repeat for other site (remote or testing)

Repeat for other site (remote or testing)

A typical web site home page Yours will be similar Parts: logo client name

A typical web site home page Yours will be similar Parts: logo client name null links Banner with bevel, emboss

A Student home page Go back to class #1 and choose Premise, then Web

A Student home page Go back to class #1 and choose Premise, then Web site .

Banner-and logos Which app do we use to edit (scale) files? Download bee. ai

Banner-and logos Which app do we use to edit (scale) files? Download bee. ai Download bee 3 inch. ai Save inside client>Images They might get renamed as pdf files…that’s ok

Resize logos Start Illustrator Edit>Preferences> Units>pixels File>Open Browse to bee 3 inch. pdf Open

Resize logos Start Illustrator Edit>Preferences> Units>pixels File>Open Browse to bee 3 inch. pdf Open Transform panel Use selection tool (which arrow? ) and click the bee. What are the H and W: This logo substitutes for your logo Yours was probably too large also, thus, this re resize exercise

Resize bee Make H=80 px. We’ll make banner: 90 px tall (H) Be sure

Resize bee Make H=80 px. We’ll make banner: 90 px tall (H) Be sure link is selected…That way illustrator will maintain the aspect ratio for us Width/height

Crop Then File>Save for web Name logo. png (or gif) Save inside Client>Images Close

Crop Then File>Save for web Name logo. png (or gif) Save inside Client>Images Close Illustrator

Start Photoshop New document: 1366 x 90 px white shape 27% survey found 1366

Start Photoshop New document: 1366 x 90 px white shape 27% survey found 1366 most popular (

Should see Background as only layer Change Background Layer name to Banner Select Banner

Should see Background as only layer Change Background Layer name to Banner Select Banner layer Fill (Paint Bucket) with desired color Later we will have a different color for the body. think adobe color site…

Layer styles • Click the fx tool • Choose Bevel and emboss • I

Layer styles • Click the fx tool • Choose Bevel and emboss • I adjusted the size property a little

Color Choose a color Use paint Bucket I made mine a shade of purple:

Color Choose a color Use paint Bucket I made mine a shade of purple:

Composite logo Open/switch to logo. png, or logo. gif Should have 2 files open:

Composite logo Open/switch to logo. png, or logo. gif Should have 2 files open: (Note: If one is named index, change its Image>Mode to RGB) Move logo onto banner

Text: You choose: Size (72 points? You decide …remember banner is 90 px tall)

Text: You choose: Size (72 points? You decide …remember banner is 90 px tall) Choose sans serif font Choose text color…color. adobe. com, pick analogous colors for text Enter client’s name Try tracking undo Add drop shadow

Save the banner Try File>Quick Export As Client. Banner. png in Client>Images Save psd

Save the banner Try File>Quick Export As Client. Banner. png in Client>Images Save psd version also (why? ) Write your last name, and hand to GA for extra credit (10 points) Next: Add links,