ADOBE GRAPHIC DESIGN WORKFLOW: PEN AND INK DRAWING TO TRANSPARENT GIF

BookMarkTutoring.com teaches the basics of web-based graphic design development with Adobe Tools. The complete end-to-end process for creating transparent gifs that are web-ready is a multii-step process. The process at BookMarktutoring.com involves 5 programs: Google Picasso, FileMakerPro, Adobe Illustrator, Adobe Photoshop and Adobe Dreamweaver. For this process, a pen and ink drawing is  first created on paper and then scanned. crop and shadowing). Next the graphic is stored into a FileMaker Pro Database, categorized and indexed. Adobe Illustrator is then used to create a white-background free live-trace. The image is then imported into Photoshop where the graphic file is optimized for the smallest memory size and highest quality and converted to transparent GIF file. The GIF file is then placed into a DREAMWEAVER HTML file.

See the cheat sheet for this process below.

If you would like to see the process demonstrated you online screensharing, contact mark.c.stansberry@gmail.com at Bookmarktutoring,com or call (707)235-4095. The lesson will not only save you hours of time but only costs just $30.00.

With BookMark's online screensharing, we can observe you as you attempt this process online (either on your computer or remotely on BookMark's computer. The screensharing process ensures that you perform the procedure quickly and correctly the first time. It is an effortless and fun way to learn the entire graphic design process --- from sketch to transparent gif based web page.





DIRECTIONS

GO TO PICASSO
SELECT PICTURE
CROP PICTURE
INCREASE SHADOW
GO TO LIBRARY
COPY FULL FILE PATH F PICTURE
GO TO ILLUSTRAT
OPEN FILE
FILE: Place: File Name
ENTER
LIVE TRACE: Custom
TRACE TYPE: Comic
IGNORE WHITE: Check
OK

TOOL BAR: Expand
TOOL BAR: STROKE WIDTH
2, 3, 4, 5,6 Pixels

TOOL BAR: STROKE COLOR
SELECT ALL
COPY

GO TO PHOTOSHOP
NAME PHOTOSHOP FILE
TRANSPARENT BACKGROUND
FILE: Place
ENTER
Select the image size option from PhotoShop's  image menu.

Check the Image Resample Check Box on the Image Size dialog box that appears

Enter 800 into the width pixel dimensions box

Select Bicubic Sharpener(best for reduction) from the list box in the Image Size dialog box.

Examine the resulting image for picture quality. It should have retained its sharpness and overall fidelity.

Select Save for Web Devices option from the File menu

Select JPEG from the graphic file selection list box (second box from the top) in the Save for Web Devices dialog box that appears

Locate the Optimize Menu (series of small lines on the upper left corner on the Save for Web Devices) dialog box. Now select the "optimize for file size" option and select OK.

SELECT ALL
COPY IMAGE
NOTE FILE LOCATION

GO TO DREAMWEAVER
OPEN HTML FILE
SAVE HTML FILE
PASTE IMAGE
HTML PROPERTY BOX: BACKGROUD COLOR GREEN
PREVIEW IN BROWSER
SAVE FILE