art handouts - its: publishing academic web pages | community

22
Art Handouts ART170 Publishing Web Sites to the CCAC Academic Server via Microsoft SharePoint Designer First, Have your site opened in SharePoint Designer .... 1. Go to File>Publish Site> 2. You will then see a window called Remote Web Site Properties. 3. We only need to edit what is in the “Remote Web Site” tab. >Select FTP radio button, >Type ftp://web.acd.ccac.edu/public_html into the Remote Website Location cell. >Click O.K. -FTP stands for File Transfer Protocol. 4. Next you will see a Name and Password Required window. 5. Type in your NETID username and password. Same as you use to log onto the computer>O.K (you may need to delete the CCAC\ that FrontPage may enter automatically). >Shortcut to Publish Sites: Once you are setup to publish the site you can then use the “Remote Website” tab at the bottom of the screen in FrontPage for all future uploads. You must have the website folder selected. Note: If you move to another computer you will need to go through this process again.

Upload: others

Post on 03-Feb-2022

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART170

Publishing Web Sites to the CCAC Academic Server via Microsoft SharePoint Designer

First, Have your site opened in SharePoint Designer....

1. Go to File>Publish Site> 2. You will then see a window called Remote Web Site Properties.3. We only need to edit what is in the “Remote Web Site” tab. >Select FTP radio button,

>Type ftp://web.acd.ccac.edu/public_html into the Remote Website Location cell. >Click O.K. -FTP stands for File Transfer Protocol.

4. Next you will see a Name and Password Required window.5. Type in your NETID username and password. Same as you use to

log onto the computer>O.K (you may need to delete the CCAC\ that FrontPage may enter automatically).

>Shortcut to Publish Sites: Once you are setup to publish the site you can then use the “Remote Website” tab at the bottom of the screen in FrontPage for all future uploads. You must have the website folder selected. Note: If you move to another computer you will need to go through this process again.

Page 2: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

ts

6. You will now be in the "Remote Web Site" tab of your site environment.7. The left window is your Local Web Site. The right window is the

Remote Web Site you will be publishing to. This is the CCAC academic server. Notice the directory paths for each.

8. At this point leave all as is and click the Publish Web Site button (bottom right of screen).

9. You will do this process each time you want to upload changes. FrontPage will only upload files that are changed - which will save time.

Go to http://web.acd.ccac.edu/~yournetidusername to view your site….

Note1: For future reference...if you need to upload your site and do not have Front-Page go to the following address in Internet Explorer (or any browser):ftp://[email protected] will then see a public_html folder. Open to see your site and to upload changes. This works just like folder to folder changes on your computer -except it is remote.

Note2: You have 10mb of web space. Your space should be there as long as you are a student with an NetID. NetID account usually will expire after 180 days of inactivity.

Remember:1. Do not change the name of the “default.htm” file. This is how the

server recognizes that this is the first page to load in the directory.2. Do not move files around and/or change names once placed into your

site. They are fixed to a specific directory path. By changing the name or location of the path -the link will be broken.

Other web hosts:>Your ISP at home probably provides you with web space you can use. >www.godaddy.com>www.1and1.com

ART170

Page 3: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART

Adobe PDF Presentation-Adobe Acrobat 8 Professional DescriptionThe PDF Presentation will produce a digital movie to display your artwork. There will only be one file produced which will be a Adobe PDF file. This has many advantages for external viewing on CD, sending attached through email, and displaying on the web. You will need to have at least 15 images in the movie and the lead slide (total of 16). You can add more slides if you like, and be more creative by adding a information slides at transition areas, description text to your images, final slide, etc...

Note: Adobe Acrobat can import the following formats (PDF, BMP, GIF, JPEG, PCX, PICT, PNG, DOC, TIFF, etc...). If your files are already in these formats then you can skip to step 1.

To import from the following applications you will need to convert file formats....

Adobe Indesign to PDF.InDesign>File>Adobe PDF Presets>High Quality Print>"Export" window>Save>Export PDF Window" leave on current default settings -you may need select a page range>Export.Adobe Illustrator to PDF.Illustrator>File>Save As...>In the "Save As" window on the bottom for Save as Type choose Adobe PDF>Save>Next window will be "Save Adobe PDF">leave on default settings>Save PDF.Adobe Photoshop to JPEG. Photoshop>File>Save As...>In the "Save As" window on the bottom for Format choose JPEG>Save>Quality to maximum (12) and Baseline ("Standard")>OK.

1. Create lead slide: >Develop your lead slide in your favorite layout application. >Consider matching the layout from your hardcopy portfolio title page. Lead slide (17"x11"-Landscape only. This orientation matches screen orientation): -Name -Portfolio-Two Dimensional Design (pending) -Traditional -Digital-Three Dimensional Design (pending)-Press "Esc" key to exit movie

2. Create PDF Presentation source folderConvert any necessary files to importable formats. Then Copy/Save files that you want to display in your movie into one folder named PDF Presentation.

3. Open Adobe Acrobat 8 ProfessionalIf you see a getting started screen when Acrobat opens close screen.>Go to File>Combine Files>In the "Combine Files" window select 'Add Files' in the top left of the window-see illustration next page.

Note: If you already have your files labled in the order you want them to appear then you can select add folder.

>You can add the files one at a time in the order you want them to display in the movie.>Select Larger File Size-Better Quality in the bottom right corner>Next - next window>Make sure that Merge files into a single PDF is selected (top left) then Create (button in the bottom right). - next window>Files will be combined>Save. Choose location to save. Rename file.

Page 4: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART

Adobe PDF Presentation-Adobe Acrobat 8 ProfessionalCONTINUED

4. Set PreferencesOnce you save the file it should open in Adobe Acrobat. If not then find the file and double-click to open.>Once opened go to Edit>Preferences>Select "Full Screen" from the catagories on the left. >Edit Full Screen Navigation, Full Screen Apperance, and Full Screen Transi-tions to your preferences.>File>Save

Combine/Add files illustration

Adobe PDF Presentation-Adobe Acrobat 8 ProfessionalCONTINUED>>>

Page 5: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART

Adobe PDF Presentation-Adobe Acrobat 8 ProfessionalCONTINUED>>>

5. Set Properties>File>Properties>Change "Document Properties" window to 'Initial View'. >Page Layout to- Single Page Continuous>Open in Full Screen Mode- checked>OK>File>Save>Close Adobe Acrobat >Find file and double click to open.>When asked to put into full screen mode-OK>Movie should start and advance per your settings. You should also see navigation controls.

Page 6: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART

Adobe PDF Presentation-Adobe Photoshop Note1: You need to have at least 5 images in the movie and the lead slide (total of 6). You can add more slides if you like, and be more creative by adding a final slide, description text to your images, information slides at transition areas, etc...(pending on the course you are in you may be required to include a project as 1 of the 5 images).

Note2: It is best to name your files as a,b,c,d or 1,2,3, for how you want the image order of your presentation to appear. The lead slide should appear first (1-a).

Note3: The images used will be stretched to fit screen in the presentation. The initial files used in the movie should be large in dimension. Approximately the size of your screen resolution or the destination view source.

1. Create lead slide: Applies to all classes. You can design however you like. From Illustrator/Photoshop: Develop lead slide on an 11x8.5 or (1024x768) artboard. Include your: 1. Name 2. Course number and name (e.g. Art 168 Digital Imaging)3. Term and year (e.g. Fall 2005)4. Click Esc. Key to exit movie5. --include your web address if you are in Art 170 Web Graphic Design.

Art 150: Preparing files from illustrator.1. Create a new folder and call it Presentation (or something similar). This is

where you are going to save all the prepared Illustrator files for the movie.2. Open the file to be prepared. Enlarge file so to fit on the 8.5x11 artboard.

For example, if you want to include a logo in the movie. Enlarge the logo to fit up to the edge of the 8.5x11 artboard it was created on. If the file was already designed on an 8.5x11artboard (Olympic project). Just leave as is. Be sure not to have any other objects outside the artboard (pasteboard) that are not part of the design.

***Illustrator encapsulates all objects in your file (artboard/pasteboard). It does not save to the page size. An object on the pasteboard that is not part for your design will be saved in Illustrator. Also, you may want to put a box around logos, letterforms, etc so the artwork is not clipped.

3. Once enlarged/opened > File Save As... > Rename > Save the file in Illustrator format > and save into the Presentation folder.

4. Open Photoshop….>>>>next page>>>>

Art168/170: Preparing Adobe Photoshop/image files. Prepare files and save in Photoshop format. Move to presentation.

Art165: Preparing files from InDesign, and other applications...1. Create new folder and call it PDF working (or something similar). This is

where you are going to save all the prepared image files for the movie.2. The easiest and most efficient way is to just screen capture the file that

you want to use in the movie. Try to capture the maximum amount of viewing area of the file.

3. To screen capture press and hold Prnt. Scrn. Key (top right corner of the key board) for at least 4 seconds…

4. Open Photoshop5. Go to File>New…a new window will appear with the current dimensions of

your screen (Photoshop recognizes that you just did a screen capture) > O.K.6. Press Ctrl+V (paste). Screen capture places into artboard.7. Crop to desired area.8. Save into new folder created in Photoshop format (.psd). ***In general, if you want to incorportate files from multiple applications consider using screen captures.

Page 7: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsART

Adobe PDF Presentation-Adobe Photoshop Continued...Preparing the Adobe PDF Presentation>>>Photoshop opened...1. Go to File>Automate> PDF Presentation>PDF Presentation window apprears. 2. Browse and find the preparation folder or loose images that you want to use. Output Options- Save as: Presentation- View PDF after Saving (checked)Presentation Options:- Advance Every 5 Seconds (your choice…5 works well)- Loop after last Page (your choice)- Transition (your choice - Random Transition works well)3. Then Save> “Save” window appears...Rename and choose to save file

into desired location. If you are in Art170 Web Graphic Design you want to save the file within your web environment (image folder or loose). The format is PDF Presentation (*.PDF) -this is the only choice.

4. Then Save>PDF Options window appears....

PDF Options window:Encoding:- JPEG- Quality: this is where you will need to do a couple test runs to see where quality and file size needs to balance. 8-10 is usually fine unless you are working with some initially small images.

>Leave rest of the boxes unchecked.>Then O.K.

The presentation is prepared automatically and will open in Adobe Acrobat to view.

If quality seems low….Redo process and readjust the JPEG quality higher.

Page 8: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsAdobe PhotoshopA. Modes

1.CMYK (Cyan, Magenta, Yellow, and Black) a.Color mode for print b.Resolution for print i.Lab: 200ppi ii.Industry: 266ppi

2.RGB (Red, Green, Blue) a.Color mode for monitor presentation (web) i.Web resolution: 72ppi

3.Grayscale (Tonal range of Black) a.Gateway to the Bitmap, Duotone modes

4.Bitmap (Black or White) a.Zero or one i.5 Methods 1.50% threshold a.black and white balance from middle gray 2.Pattern Dither a.screen pattern 3.Diffused Dither a.diffused pattern 4.Halftone Screen a.frequency (less equals more) 5.Custom Pattern a.works with custom pattern palette

5.Duotone (4 types of tones: mono, duo, tri, and quad) a.Features are color and curve editing

6.Indexed Color a.Setup for the GIF file format (256 colors maximum)

7.Lab Color a.High resolution scanning/printing b.More color depth

8.Multi-Channel a.Introducing custom colors (pantone)

ART

Page 9: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsWeb File Formats

Fortunately, the software designers at Adobe and others implemented a “Save for Web” option under the File pull-down menu. This feature enables users to easily prepare and save media for the web. The following outline is demonstated utilizing this option. Ultimately, the general rule is files (images) with many colors (more than 256) should be saved in JPEG. File that are less that 256 colors (logos, line art, simple graphics-animations) should be saved in GIF.

GIF file format: “Graphic Interchange Format”General Information:

1. 8-bit file format: A bit of information is a zero or a one. Therefore an 8-bit file means a string of 8 zeros and ones are denoted for each pixel of information.

2. GIF is a lossless compression. The file does not get compressed when saving. This means you can keep saving a GIF many times without losing quality.

3. 256 colors maximum can be saved for a GIF file.

4. GIF files can support transparency and animation.

5. GIF files that are interlaced means that when a website is loading ... the intelaced option causes the file to appear at low resolution - then to medium resolution- finally to the resolution it was initially saved in. It is usually not suggested to use the interlace option due to the distracting quality it gives visually when loading.

6. Dithering is usually best when gradients are present. Dithering will apply a screened pattern into the file to “diffuse” the gradients so there is not banding.

JPEG: “Joint Photographic Expert Group”General Information:

1. 24-bit file format: Can handle millions of colors.

2. JPEG is a lossy compression. The file gets compressed when saving. Even on maximum quality. Therefore, it is good practice to save a working file in a non-compressible format (primarily photoshop *.PSD) until ready for JPEG.

3. JPEG does not support transparency or animation (quicktime).

4. JPEG files that are progressive (basically same as a “interlaced” GIF file) means that when a website is loading ... the progressive option causes the file to appear at low resolution-then to medium- finally to the resolution it was initially save in. It is usually not suggested to use the interlace option due to the distracting quality it gives visually when loading.

ART 170

Standard GIF setup Standard JPEG setup:note: Very High Setting

Page 10: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt

Web Photo Gallery:1. Create a “source” folder. 2. Place all files that have been cropped/resized to ____ max. in width

and saved as JPEG (usually “high” setting is sufficient). Minimum of 5 images are required. The images can be what ever you choose.

3. Create a “destination” folder in your site environment “images” folder (ex. Sitegallery)

4. Open Photoshop>File>Automate>Web Photo Gallery.5. Choose type of image gallery/email.6. Browse and choose the source and destination folders you have

already created.

The following are the “Options” that should not be edited. The rest of the settings are up to you.

Options area of the window. Not all galleries will have these options.1. General a. Leave the extension set to .htm

2. Banner-your choice

3. Large Images a. Leave resize images unchecked. (you have already resized them)

4. Thumbnails a. Change size to large b. Rows and Columns should be adjusted to handle amount of images.

5. Custom Colors a. Should match your site colors

6. Security-no need to edit

-Once all is determined then >OK-Gallery will be created for you.-The destination folder “index” file will then need to be linked within the gallery/portfolio section of your site. Preferably to a blank page. ***most of these steps and more are in Photoshop under the help menu.

options

Page 11: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt160

Art 160 PortfolioWeb Photo Gallery

1. We can utilze the source folder that you created for the PDF presentation to create a web photo gallery.

>Create a new folder called web photo gallery in your overall Art160 Portfolio course folder. >Select PDF presention source folder and copy then paste into the web photo gallery folder you just created. >Rename the folder Gallery source. >Create another new folder called Gallery destination in the web photo

gallery folder. This will eventually house the web gallery that you will upload to your web space on the college server.

2. The Photoshop web gallery operation can accept most file formats (Illustrator (*.ai) and Photoshop (*.psd)) included. The only two commonly used formats that it cannot accept are Word (*.doc) and InDesign (*.indd) files.

3. Unlike the PDF presentation you cannot edit the file order of display. You will need to manually edit the file name to display in the order you want them to appear in the gallery (a, b, c, d, etc...).

Lead image is optional. Very Important not to rename the file extension! Just the file name only. 4. Open Photoshop>File>Automate>Web Photo Gallery.5. Choose type of image gallery/email.6. Browse and choose the source and destination folders you have

already created. 7. Options follow...

Options area of the window. Not all galleries will have these options.1. General a. Leave the extension set to .htm

2. Banner-your choice

3. Large Images a. See screen capture on next page. b. You should resize all images to a consistent width (700 pixels).

4. Thumbnails a. Change size to large b. Rows and Columns should be adjusted to handle amount of images. c. 5 columns usually works well. Then however many rows.

5. Custom Colors-your choice

6. Security-no need to edit

-Once all is determined then >OK-Gallery will be created for you automatically.

-If the gallery result is not what you want. It is much easier to just delete the destination folder, create a new one and start over again.***most of these steps and more are in Photoshop under the help menu.

If you have had Art170 Web Graphic Design then you should be able to move the gallery destination folder into your web environment and create a link from your gallery page of the website. If you have not had Art170 or do not know how to upload pages and media to your web space I will be able to assist you with this process.

Page 12: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt160

Page 13: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsPreparing files for Critiques/Final Submission via the common “ArtFiles” folder.folder on the desktop.

Very Important:>Do not move/delete the “ArtFiles” folder from your desktop>Do not create new folders in the “ArtFiles” folder>Do not save working files to the “ArtFiles” folder. >ONlY PREPARED FIlES FOR CRITIquES/FINAl SuBMISSION SHOulD BE SAVED IN ARTFIlES FOlDER!

The ArtFiles folder is located on your desktop (see icon to the left). This is a common folder used for submitting files for critiques and final submission only. Within the ArtFiles folder there are a number of instructors.

You will need to choose the Blobner_Max Professor folder to start-open. Next, find your course folder-open. Then the semester-open. Finally, the assignment folder-open. Name the file with your last name.

Pending on what class and application you are using you will need to submit you files in a specific format.

Art150 Introduction to Digital Graphic Design: PDFFile>Save As...>"Save as type" pull-down menu>Adobe PDF>Save PDF>"Save Adobe PDF" window>leave on Illustrator default>Save PDF

Art165 Digital Publishing: PDFFile>Adobe PDF Presets>[High Quality Print]

Art168 Digital Imaging: JPEG (two ways to approach saving JPEG's)1. File>Save for Web & Devices> see illustration below2. File>Save As... Format: pull-down menu>JPEG>JPEG options window- quality set to 8 (High).

Art170 Web Graphic Design: JPEG/GIFFile>Save for Web & Devices> see illustration below

ONCE YOu SAVE THE FIlE TO THE ARTFIlES FOlDER YOu MuST lOG OFF THEN lOG BACK ON YOuR COMPuTER!We can only have 10 students connected to the Artfiles folder at a time. This is why it is necessary to log off so that other students can access the folder.

ArtFiles

Standard GIF setupStandard JPEG setup:Note: Very High Setting (80 Quality)

Page 14: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsPreparing art book for print/service provider:

1. 2x2 mock-up of pages printed with the following Print settings. You should create a booklet from these pages.

General Setup Marks and Bleeds

>Black and white Interior pages and covers108b HPLaserJet 9040/9050

>Paper size -letter>Thumbnails-checked-2x2

>None-this becomes deactivated when thumbnails is checked.

2. All pages printed @ 100% with the following Print settings:

General Setup Marks and Bleeds

>Black and white Interior pages108b HPLaserJet 9040/9050

>Color Covers?108ae Xerox Phaser 8560

>Range radio button-commas separate pages-(-) dashes for series

(e.g:) 4, 5-10 will print page 4 then pages 5-10.

>Paper size -letter>Page position-centered

>All printer marks box checked.

*Important: If you have design elements going off the page then:>Bleed and Slug-uncheck box and enter.25” all around

3. PDF File saved to external memory device (Jump drive or CD) -File>Adobe PDF Presets>High Quality Print -Export window>choose destination to save file to. -Leave all settings the same>Export -Export Adobe PDF window>Marks and Bleeds>All printer marks. -Important:

-If you have design elements going off of the page you will need to go to the “Marks and Bleeds” tab and check all printer marks and enter in .25” all around for the bleed.

4. Finally, complete 2 copies of the artbook and drop all pertaining pdf’s into the artfiles folder. 1 copy I will keep for future classes and the other will be for your portfolio.

Project due May 4 @ 10am

Suggested Printing Service Provider-Copies at Carson:http://www.copiesatcarson.com1315 East Carson St. Pittsburgh PA 152031.800.574.7081 Local Phone: 412.481.4875

Art165

Page 15: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsAdobe Illustrator Rotate/Copy about a center letterforms assignment

1. Activate grid and snap to grid.View>Show Grid (optional) & View>Snap to Grid 2. Draw centering guidesClick~hold~and drag from the ruler horizontal and vertical guides to the center of the artboard. 3. Paragraph palette-Center justificationWindow>Type>Paragraph. Choose center justify button (second from the left) 4. Character palette-Increase font size to at least 72pts (1inch).Window>Type>Character

5. Choose the type tool and click down on center of the artboard. 6. Type in character (one letter)

7. Double-click the rotate tool (screen should look like below at this point).

Art150

illustration: letterform is centered and placed at the guide intersection.

FONT SIZE

CENTER JUSTIFIED

ROTATE/COPY

ROTATE TOOL

Page 16: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt150

Adobe Illustrator Rotate/Copy about a center-continued letterforms assignment

8. Once the rotate tool is double clicked a Rotate dialogue box will appear. ~Determine how many letterforms you want to rotate/copy and enter the degree value in the “Angle” cell box8 sides...45o (8 should be the maximum. Anymore will be too busy). 6 sides...60o

5 sides...72o

4 sides...90o

3 sides...120o

Then click “Copy” then> “OK”. You should now see the original letterform and another copied to the specified angle. If you see only one letter at this point you need to click the copy button. Go back to step 7.

9. Now you need to repeat the transformation.Object>Transform>Transform Again. (Ctrl-D).You will need to transform again however many times you need to repeat the let-terform per angle choice.

10. Select all of the letters after rotating is complete (Crtl-A) or click hold and drag with the selection tool.

11. Edit the baseline shift and rotate character. These options are in the character palette. See illustration below.

12. Utilize the baseline shift and rotate character to come up with many solutions. Also, go back to the paragraph palette and choose different alignments. Once a solu-tion is found don’t forget to look at the design within a format (reversing design with a shape).

BASELINE SHIFT

CHARACTERROTATION

Page 17: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt168

Physical Triptic Preparation:Adobe Photoshop:

~Convert image to grayscale.-Crop to size 7.5x10@150ppi to 200ppi or 10x7.5@150ppi to 200ppi. Make sure inches is active. -Image>Adjustments>Levels. Set black and white point. -Save file as grayscale version._______

~Convert image to black and white by using the Bitmap mode or threshold.-Image>Mode>Bitmap. Choose a methodOR--Image>Adjustments>Threshold. -Save file as b/w version._______

~Convert image to variations.-This step is your choice. Consider filters and further adjustments.-History Palette>go back in History palette to “Levels”. -Apply filter and/or adjustments. -Save file as variation under a new name. _______

~Edge Treatment. -Decide on edge treatment approach. Hard, soft, distressed, effected. -Apply exact same edge treatment to all 3-save and print. _______

~Mount to black foam board. Minimum size of 13x30 (29.5").-Use tape/rubber cement/glue/ to mount triptic prints to board. -The final mount should have approximately 1” border all around and in-between.

Page 18: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsArt168

Digital Triptic Preparation:Contact Sheet II stepsAdobe Photoshop

~Before getting started you will need to copy your 3 final files from the "physical triptic" into a new folder. You should create this folder in your current project folder. _______~Open Adobe Photoshop>File>Automate>Contact Sheet II. -See settings in illustration below. Setup your Contact Sheet II and click OK. Pho-toshop will create the Contact Sheet for you from there. To arrange your images in a specific order rename them (a, b, c,...). Then the contact sheet will make them in that order._______~Save final file as JPEG to the Artfiles folder for grading. -See additional hand outs to save file as JPEG/Artfiles folder. _______~Printing-This step is your choice. I will only need the digital file for grading. -File>Page Setup>choose 11x17 for paper and the appropriate orientation. -File>Print> choose the VAC108b HPLaserJet 9040/9050 ---ONLY! >Print.

Browse: To locate folder with 3 final physical triptic files ONLY.

Resolution: This should be set to the “exact” resolution you used for your final three versions.

All of the remaining

settings should match.

Note: If you have a vertical composition then change~ DocumentWidth: 11Height: 15ThumbnailsPlace to “down first” with 1 column and 3 rows.

Page 19: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsSite Environment Creation:-Create new folder (usernamesite) in a place that is “safe”. It is strongly suggested that this folder is on the computer rather than a jump drive.

-Open SharePoint Designer. File>New>Web Site...

-A "New" window will appear. Make sure you are on the "Web Site" tab. Then choose General>One Page Web Site. Notice at the bottom of the window there is a "Specify the location of the new Web site" URL.Browse and find the folder you created in the first step then open.

-The site environment will be automatically created for you.

-The original folder that you created will now have a small globe icon.

-DO NOT CHANGE NAME OF “default.htm” file.

-Notice the new tabs at the bottom of the page. Folders/Remote Web Site/Reports/Navigation/Hyperlinks

*Creating a site environment in SharePoint Designer allows all content for the site to be collected into one area. Also, more features such as “Remote Web Site” becomes active which allows you to upload your site to a server within your site environment.

Key Topics:1. All media to be placed into the site must be within the site environment

folder. You should create a folder called "media" to collect all final files. 2. Do not change the name of the “default.htm” file. This is the name of the

first file a server will try to find to load within a folder directory. 3. We are designing the entire site on one page for ease of editing.4. The bookmark sections should flow well in navigation to create the illusion

that the user is jumping to new pages. 5. Consider type of compositional theory.6. Consider using a table for the layout of your site. 7. The resume should have good typographical structure.8. Focus on meeting requirements of the project first. Then you can add more

media and features as more time becomes available. 9. Three types of navigation/links: a. Static b. Interactive buttons c. Swap Image-Behavior10. We will be creating a few more folders within the site environment. a. Media-all media such as header, animations, collages, etc... b. Buttons-interactive buttons and rollovers c. Gallery-web photo gallery source and destination

Art170

Page 20: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsAdobe PhotoshopA. Modes

1. CMYK (Cyan, Magenta, Yellow, and Black) a. Color mode for print b. Main setup for print i. Computer Lab: 200ppi ii.Industry: 266ppi-min.

2. RGB (Red, Green, Blue) a. Color mode for monitor presentation (web) i. Web resolution: 72ppi

3. Grayscale (Tonal range of Black) a. Gateway to the Bitmap, Duotone modes

4. Bitmap (Black or White) a. Zero or one i. 5 Methods 1. 50% threshold a. black and White balance from middle gray 2. Pattern Dither a. screen pattern 3. Diffused Dither a. diffused pattern 4. Halftone Screen a. frequency (less equals more) 5. Custom Pattern a. works with custom pattern palette

5. Duotone (4 types of tones: mono, duo, tri, and quad) a. Features are color and curve editing

6. Indexed Color a. Setup for the GIF file format (256 colors maximum)

7. Lab Color a. High resolution scanning/printing b. More color depth

8. Multi-Channel a. Introducing custom colors (pantone)

Adobe

Page 21: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsContact Sheet Prior to individual meeting you should print out a contact sheet of your artwork. This contact sheet will make the visual organizational process much easier. The contact sheet automation can accept most file formats (Illustrator, PDF, JPEG, Gif). Although, if you have an Adobe InDesign file you will need to convert it to PDF.

>Open Photoshop...>File>Automate>Contact Sheet II>Match to screen capture below>Make a contact sheet for all of your folders>Print contact sheet to the Xerox Phaser 8560 (8.5"x11" color)

Art160

See back for an example of a contact sheet result.You should save the contact sheet(s) in a seperate folder.

Browse to find folder that you want to make a contact sheet of...

This will produce a 25 thumbnail per page result. DO NOT check ro-tate for best fit.

Page 22: Art Handouts - ITS: Publishing Academic Web Pages | Community

Art

Han

dou

tsCreating CD/DVD'sApplicationusing the inf file as part of the CD

Art