graphic design | web design

Prepress tips for graphic designers

2009-11-04T00:05:00.000-08:00

When you design artwork for print, standard practice is to send a PDF to your printer. But are you 100% sure you got the settings right? Are you confident the size is correct? Have the colours been set to print standards or client brand guidelines? What about font usage?
So many things can go wrong, costing you and your client money. So to help, Sigurdur Armannsson — art director at the Icelandic Ad Agency — has prepared these 16 prepress tips that cover the major aspects for correction in your artwork. By checking each tip as you go your file will be in excellent shape for sending to the printery.

01. File the job into a tracking or accounting system
Every business needs a tracking system where information about the client and his or her jobs are filed. Systems range from high-end business software to simply using FileMaker or similar to store information. Freelancers should also use something that takes care of this. I use iBiz.

02. Use files and folders that bear the job number
Tracking systems create running numbers. You should use them for your files and folders too. The running numbers act as keys to further information about every project and client, and save you from creating new files and folders for every job. You could use abbreviations or codes for your client and then the number and a short descriptive name, e.g. ABC 12345 Brochure Spring 2010

03. Stamp the artwork
Put information inside the artwork. If the client does not object, put a short line in small type 4-4.5 pt., inside the artwork, on the back of a brochure. Include your companies name, the job number and a date. MyCompany ABC 12345 10/09. The name of the printery would be a good addition too. This will help identify the work later.

04. Make it clear who is responsible for the design
Before you start, make sure you have a design brief. What is the main purpose of the design? What are the clients motivations? Who is responsible for the job? An art director? You?

05. Proofread
The odd thing is that clients can be calm about minor errors in the design, like lines not being of same thickness or such. But errors in text are fatal. Use a good proofreader. If the client wants to proofread himself, be sure to have that in writing. An email is great confirmation.

06. Make the artwork the correct size
Does the design brief specify the size? Have you checked Document Setup again? Or the outmost frame in Illustrator? Is everyone using 210×297 as Width by Height? Did the client say an A4 because it looks like an A4 or is it 220×286? For ads, contact the magazine or website. They will love to hear from you. Always double check if you aren’t sure.

07. Define bleed and trim marks in the file
Bleeding — the distance the artwork needs to extend beyond the final size of the artwork — can vary. 3mm is most common. In some cases it may not be needed at all, nor the trim marks. Clarify before you create your PDF, and open the PDF afterward to check inclusion.

08. Ensure the typeface(s) used correlates to the clients corporate identity manual
Are you using the correct typeface for your client? Are there any unnecessary fonts that shouldn’t be included the file? In Illustrator check Document Info or Find Font… and in InDesign Find Font… under Type in the menu. When delivering artwork as a PDF there is normally no reason to outline the fonts.

09. Ensure logo usage correlates to the corporate identity manual
The client loves her logo and usually wants it bigger than we want it to be. Stick to the size in the manual or the size used for recent works. If she wants it bigger have that in writing and be sure to tell her if it’s overshadowing other information.

10. Keep the colour of the logo in the right format for the media used
For print, use the logo in vector format if possible. Logos sent to you inside Word documents are no good unless the design is for web or a PowerPoint presentation. Make sure the colours of the logo are in accordance with the corporate identity manual. For print, the format should be CMYK, not Pantone unless the work is going to be printed with spot colours.

11. Keep the colour of the artwork in accordance with the media used
Now, this depends on what kind of colour workflow you will use. For CMYK workflow, all colours should be in CMYK. Pictures should be in CMYK, colour separated for the paper used. No colour profiles should be attached to the pictures. If you are still using pictures as EPS it’s time to switch over to using native Photoshop files. The reason: If you are using transparency in your artwork, like drop shadows or transparent type or colours, your PDF will most likely have torn the photos into strips. This can be avoided by using the pictures as native PSD.
For RGB workflow, you can still use CMYK colours, except you should have all photos in RGB. It’s important to have all photos in RGB and they should have a colour profile attached. Use native PSD — it’s great, and has options not available to other formats.
If you are including Pantone colours, make sure only the colours used are in the file. In InDesign and Illustrator, go to the Swatch panel and in the fly-out menu choose: Select all unused and delete those colours. If in doubt, contact your printer. He will love to help you and he will most likely send you the correct settings for Photoshop that fits the jobs going to his printery.

12. Colour correct your monitor every four weeks
There is no way you can use either CMYK or RGB workflow with confidence if your monitor is not colour corrected at least every month. Colour correction software like iOne has a reminder built in.

13. Ensure all pictures are the actual size shown
Pay close attention to the resolution of the pictures used. Most common resolution is 250-300ppi. You should try not to enlarge or minimise pictures by more than 20% of the original size. This is just a thumb rule. When you change the size inside your document you will change the output resolution too. A 300ppi picture will be 600ppi if you minimise it by 50%. Way too high a resolution. Enlarging too much might get the resolution below what is needed to pass the printery’s preflight.

14. Preflight the artwork
Preflighting the artwork before sending to the print shop is a must. If you have done all the things mentioned above, you have manually preflighted a great deal of what is needed. Using a preflight program like FlightCheck from Markzware or similar will help further. It’s most annoying to discover just before you deliver your work that it’s not in line with necessary printing standards. If you don’t have a program like FlightCheck you can go far by using the built in document info and preflights.
In Illustrator you have Document Info. Turn off the default Selection Only and browse through the items in the list, one by one to see what’s inside your file.
InDesign has a preflight feature. In CS4 it has been moved over to Window > Output > Preflight. There you can see an overview of the document, check fonts, links etc. Also, in CS4 you can see the red or green dots at the bottom of the window that indicates various errors you may have in your file. Great help but it doesn’t beat a professional application like FlightCheck.

15. Ensure the final PDF is high resolution
Did you send your client a low resolution PDF earlier in the day? Did you remember to switch over to a high resolution output? Are you using the built in PDF settings of InDesign or Illustrator? Ask your printer for PDF job settings. The built in settings are usually not what is used for professional PDF output. Or at least know which of the built in settings you are supposed to use.
High Quality Print and Press Quality settings are tempting to use if you want quality (because of the names), but in most cases you will have to use PDF/X-1a:2001. Consult your printer here. They will love you.

16. Have artwork approved as final
Get in writing (preferably email) a client approval before the job is sent to the printery. Or in bigger agencies the approval has to come from an art director or account manager. Verbal communication cannot be relied upon if something goes wrong.
These 16 pointers may seem overwhelming at first. Don’t fret, because when you’ve worked through the steps a few times they’ll become a part of your prepress routine. You’ll be able to quickly run through the list and discover that you’ve covered almost every one while working on your design. Once again: Talk to your printer to get the best results.

And finally, here are the 16 tips without the above explanations — you can keep this handy since you already know what they mean:

File the job into a tracking or accounting system
Use files and folders that bear the job number
Stamp the artwork
Make it clear who is responsible for the design
Proofread
Make the artwork the correct size
Define bleed and trim marks in the file
Ensure the typeface(s) used correlates to the clients corporate identity manual
Ensure logo usage correlates to the corporate identity manual
Keep the colour of the logo in the right format for the media used
Keep the colour of the artwork in accordance with the media used
Colour correct your monitor every four weeks
Ensure all pictures are the actual size shown
Preflight the artwork
Ensure the final PDF is high resolution
Have artwork approved as final

Web design tips & tricks

2009-10-12T04:26:00.000-07:00

Web design tips & tricks

In these pages you can found articles, tutorials, tips... that I hope can be useful for web page creators. Some of the articles were created in relation to discussions in which I took place at the WebDesign-L mailing list, a very interesting list for web designers.

Vertical align for navigation lists with multiple lines.

Making web pages extend to the bottom of the browser window

If you ever made a web site with the content in a center column and a different background for the body, or with a navigation bar not too tall, probably you experienced the problem of some elements not extending to the bottom of the browser window when the content height is lesser that the content area of the browser window.

Making web pages extend to the bottom of the browser window.

A fix for float-margin inconsistences across browsers

While in the process of redesign one of my sites I stumbled upon some inconsistences in the margin applied to the floated boxes that I have in one of my pages. At first I thought that it was due another IE float bug (and it's in part true), but some tests proved that all browsers have issues when applying the margin.

A fix for float-margin inconsistences across browsers.

How to install Apache (and PHP+MySQL) on Windows

When you are making a web page, the easiest way of view a page stored in your hard disk is double-clicking in the file, which usually results in the page being opened in your default browser. Although this method (which I still use sometimes) it's good enough for simple static pages, it's not useful if you you are using server side languages, or even with pages that are static but use links relative to the server root. In this situations the a good solution can be set up a local test server for making all the design and tests in the same computer.

How to install Apache (and PHP+MySQL) on Windows.

Optimization of JPEG images: good quality and small size

Depending of the program you use for saving JPEG images, there are available some options for adjust the compression of the image. In this article I'll try to explain how to adjust that options and optimize the ratio between image quality and file size.

Optimization of JPEG compression settings.

Tables vs. Definition Lists

In a question posted to the list, Maximillian Schwanekamp wondered this: when presenting data which is a set of related key-value attributes, what would be more appropriate from a semantic point of view: a table, a definition list or something else?

Tables vs. Definition Lists.

Standard (and valid) DOCTYPE definitions

Web pages should include a valid DOCTYPE definition at the beginning of the HTML document, not only to validate the page against it, but also to activate the standards compliant rendering mode in Internet Explorer 6 and Mozilla/Netscape 7.

Standard (and valid) DOCTYPE definitions.

CSS Image replacement for submit buttons

Expanding the techniques for CSS image replacement by Mike Rundle and Seamus P. H. Leahy, and inspired by a question posted by Susan Petracco to the WebDesign-L mailing list, I have developed an image replacement method for submit buttons, and in general for the

15 mac applications for web designers

2009-10-04T23:02:00.000-07:00

We have lot of nice apps available for Mac OSX that aren’t available for Windows.
I’ve compiled a list of Mac Apps I have in my OSX dock that I use on a daily basis and should be useful to other Mac users and/or web designers.

1. Adobe Creative Suite
An obvious and primary requirement (I feel) all serious web designers should have. I couldn’t get through the day without Photoshop while Illustrator and Flash are constantly called upon. I hear Fireworks is good too, especially for compressing images, but I’ve yet to use it myself.

2. Transmit
Transmit is an FTP client for Mac. Edit remote files, synchronize, search, SSL, tabs; it covers all your daily FTP needs.

3. Coda
Coda is a light-weight all in one text editor. You can edit your code, preview your web page, upload to server (integration with Transmit), edit CSS and run commands in Terminal; all from within this one app. I would use Coda for front-end development.

4. Textmate
Textmate is another text editor that I prefer using for back-end development. Code completion, snippets, syntax colouring are some of the things I enjoy about Textmate along with ease of customizing fonts and colours.

5. CocoaMySQL
CocoaMySQL gives you an interface to work with your MySQL databases. This is a desktop alternative to PHPMyAdmin, which is a lot quicker and in my opinion a lot easier to operate.

UPDATE 13/12/08: CocoaMySQL has been abandoned and replaced with Sequel Pro. Works just as well and looks even better. Check it out.

6. MAMP
MAMP is an easy way to get Apache, MySQL and PHP up and running on your machine. Just by running MAMP all these three services will be up and running, no messing around in Terminal needed.

7. Things
Great app for getting things done. Set yourself project tasks and daily tasks and check them off as and when you get them done.

8. CSS Edit
A very good CSS editor. It allows for real time previews of your website and styles and is a very efficient app allowing you to easily find all styles being applied to certain elements.

9. Transmission
Transmission is used for downloading/uploading torrents over the net. Useful for sharing files with friends and colleagues (among other things)

10. MarsEdit
MarsEdit allows you to compile draft blog posts on your local machine before publishing them live on your blog. I use it daily to take notes on various blog topics I think of and then I can easily compile a blog post over the course of a week.

11. Skitch
I was only recently introduced to this by GoodOnPaper @ FOWA. Allows you to easily share images/screenshots on the web and using the Skitch editor you can add notes to your image or highlight areas of a screenshot. Very useful and saves having to load up Photoshop for simple tasks.

12. Parallels Desktop
You can run Windows XP or Vista on your Mac using Parallels. Handy for being able to test your websites in versions of IE (using Multiple IEs) and if there are any Windows only apps you need to use, e.g. Microsoft Access.

13. Office
A good old favorite for creating text documents, preparing slideshows or looking after sets of data. There are a few Mac alternatives, and of course online alternatives, but I personally prefer Office.

14. Paparazzi
Paparazzi takes full screenshots of webpages. The problem with Cmd+Shift+3 is that it only takes a screenshot of the visible screen. Paparrazi takes the whole height of the page, even below the fold, so it’s great for showing screenshots of your web designs.

15. Twitterific
Easily interact with Twitterland via Twitterific. Saves you having to make the trip to Twitter to see what’s going on as it can retrieve and send tweets for you.

How to Create a Flag Graphic with Type in InDesign

2009-08-18T05:08:00.000-07:00

In this tutorial, I'll show you how to use InDesign's ability to create type on a curve, and flow that type from one curve to another. Along the way, you'll learn a slick technique for step and repeat and how to apply gradients to text. This technique will work in InDesign CS or later. This technique would also will work in Illustrator, with minor modifications.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1 - Draw a Curve in InDesign

Use the Pen Tool (P) or Pencil Tool (N) to draw a wavy line. Use the Stroke panel or Control panel to give the line a 1 pt stroke. We'll remove the stroke later, but it is helpful to have a visible stroke on the line for the next few steps.

Step 2 - Prepare the Curve to Receive Path Type

Click on the Path Type Tool (buried under the Type Tool, or press Shift + T. With the Path Type Tool, click on the curve you drew in Step 1. This will turn the curve into a text path.

Step 3 - Duplicate the Curve

With the Selection (Black Arrow) Tool, click on the curve you drew in step 1. Hold down the Alt and drag the curve down and to the right to duplicate it.

Step 4 - Duplicate the Curve Three More Times

Choose Object > Transform Again > Transform Again, or press Command + Alt + 3. Repeat this two more times, so that you end up with a total of five curves.

Step 5 - Place the Text on the Top Curve

Click on the top curve with the Type Tool. You should see a flashing text cursor on the left side of the curve. Choose File > Place to import a text file onto the curve, or choose File > Paste to paste some text onto the curve from the pasteboard.

Step 6 - Thread the Text to the Next Four Curves

With the Selection Tool, click on the top curve. You should see a red overset text symbol appear on the right end of the line. Click on this overset text symbol to load the text cursor. With the loaded text cursor, click on the second curve. Repeat this procedure (clicking on the overset text symbol and then clicking on the next curve) until you have clicked on all five curves.

Step 7 - Skew the Type

To make the type look more like it is on a wavy flag, the type needs to be skewed. Select all five curves with the Selection Tool. Choose Type > Type on a Path > Options. In the dialog box that appears, change the Effect to Skew, and click the OK button.

Step 8 - Format the Type

Select all the text with the Type Tool, and then use the Character and Paragraph panels, or the Control panel, to format the type as you'd like it to appear. Note that I applied full justification to all the text, to ensure an even right edge, even on the last line.

Step 9 - Remove the Stroke from the Curves

Select all five curves with the Selection tool again, and use the Swatches panel to apply a stroke of None.

Step 10 - Create Two Colors

To make the flag text look more realistic, we are going to apply a gradient to the text that consists of alternating light and dark colors. In the Swatches panel menu, choose New Gradient Swatch, and create two colors, a bright red and a darker red, or any colors you'd like.

Step 11 - Create a Gradient

In the Swatches panel menu, choose New Gradient Swatch. In the dialog box that appears, click on the left-most square under the Gradient Ramp. This square is called a Color Stop. Then change the Stop Color to Swatches, and choose the light color you created in Step 10. Next, click under the colored gradient ramp to create a second color stop, and make this color stop the dark color you created in Step 10. Repeat this three more times until you have five color stops, alternating from light, to dark, to light, to dark, to light.

Step 12 - Apply the Gradient to the Text

Select all of the text with the Type Tool, and then click on the gradient you created in Step 9 in the Swatches panel. You will not be able to see the effect of the gradient until you deselect the text.

Conclusion

Use the Pen Tool to create a path for the flag pole, and add a background photo if you'd like, and you're ready for Independence day!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Graphic Design Glossary, Terms and Definitions

2009-08-16T02:37:00.000-07:00

This graphic design glossary contains vocabulary that many designers use on a daily basis and may be confusing to new designers or non-designers who need to communicate with designers. Remember, the following terms are defined as they relate to graphic design and desktop publishing. This is a work in progress and updates are made frequently. If there is a term you think is missing, misrepresented or incorrect, please suggest me.

AI- Illustrator Document extension.

Bleed- Bleed is the part of a printed document that is out side the bounds of the final size of the piece. It is used to make sure images and other design elements print all the way to the edge of the paper. It is the designer’s responsibility to set up the bleed in a document and an accepted standard is 1p6, or 1/4 of an inch, out side the size of the paper. When placing objects in a document that must go all the way to the edge of the page, make sure they extend to at least this quarter inch mark. Photoshop and Illustrator do not have an automatic way to add bleed, so it must be taken into account when set ting up the page size. In lay out pro grams such as InDesign, the bleed is set up separately from the actual page size; in other words, the bleed is in addition to the defined page size.

Bleedthrough- Areas with heavy ink cover age can soak through thin paper and show up on the other side. This is not the same as being able to see the printing on the other side just because the paper is thin. With bleedthrough, the ink actually soaks into the paper and appears in dark blotches on the other side.

Body/Copy- The body of a lay out (also called copy or body copy) is the main text.

CMYK- CMYK stands for Cyan, Magenta, Yellow and Black, the colors a printer works with, as opposed to the screen color space, RGB. This is also known as process color. CMYK is a subtractive color space; in other words, to make white, you take away all the colors.

Compression- The process of an algorithm making file sizes smaller by combining similar data. Most of the time this is a good thing, but it can also cause severe loss of quality, especially in regards to images.

Comps- Also known as comprehensives, these are the step after thambnails in the creative process. This is usually where the designs are taken into the computer and the details such as backgrounds, color schemes and images are more thoroughly worked out. Comps are the “first draft” of design. Many times designers show several different styles in comps to a client and let the client decide on a look and feel that he or she desires. Then the comps go back to the designer with some feed back and changes from the client and usually several rounds of this feed back process occur. Some times the client may ask (or the designer may want to present) mock-ups.

Crossover- Images and/or text running across two or more pages.

DPI- Dots per inch is the more exact way to define the resolution for a file that is to be printed. Some use DPI and PPI inter-change ably, though this is technically incorrect.

Elements of Design- The Elements of Design are Color, Shape, Size, Space, Line, Value and Texture.

EPS- EPS stands for Encapsulated Post Script (not to be con fused with ESP: Extra Sensory Perception). A common file for mat for exporting Illustrator files, it contains a bitmap pre view of the image as well as instructions writ ten in the Post Script language that describe how the object is to be printed. An EPS file is usually a vector, but some times people place photos in Illustrator and export them as an EPS, though I’m not sure why. Images for print should ideally be exported as TIFFs.

Font- Technically, a font is the complete collection of characters and glyphs, including numbers, symbols, accented characters, punctuation marks, etc. in a given face design. A font also includes the design in various weights, such as bold or italic; it is more comprehensive and complicated to design than a typeface.

Free hand- Free hand is the Macro media equivalent of Adobe Illustrator.

Fire works- Fire works is the Macromedia equivalent of Adobe Photoshop.

Ghosting- Also known as screening back, it is where an image is made transparent so that the background shows through. Some times this can be an undesired effect in the printing process due to too little ink being transferred to the paper. Be sure to check for unwanted ghosting on the press check.

GIF- A proprietary file for mat from CompuServe. It is used in web graphics and is best for images that are made of solid colors, like logos. GIFs support transparency (how ever, pixels are either transparent or opaque, nothing in between) and they can be animated. GIFs are also considered a loss less format–meaning they do not suffer compression artifacts–as long as they do not exceed 256 colors.

Gradient- A gradient is a fade from one color to another. There are many shapes a gradient can take, but generally it is either linear (straight) or radial (round, where it fades from the center out wards). Gradients can also be highly customized with many different color pat terns so that it is difficult to tell if an object actually has a gradient. Generally gradients are used to add depth, or sometimes a shiny or metallic look, to a design element, but they can also be used simply to color an object.

Hickey- Yes, this is a real term in graphic design! Hickeys hap pen when foreign matter like dust, blobs of ink or bits of paper make marks on a print piece. You should look for them at the press check.

HSB- Hue, Saturation, Brightness is a color space that you can use when dealing with images in graphics pro grams. It sep a rates the hue—what you think of as color—from the saturation—how much white is mixed with the hue—and the brightness—how much black is mixed with the hue.

Illustrator- A vector program often used by designers to create logos and work with or manipulate type.

Imposition- The process of setting up pages in their correct order for print. This order is some times referred to as a Printer Spread.

INDD- InDesign Document extension. InDesign is used for page layout—assembling images and text—and is the Adobe version of Quark. It is capable of much more in tricate and precise control over text.

InDesign- A page layout or desktop publishing program used by designers to combine text and images. There was a series of InDesign articles published on Creative Curio: You Still Use Quark?!, Making Changes Easier with Master Pages, Avoiding Disaster with Paragraph Styles, Under standing InDesign Layers and reference guide for InDesign Short-cuts.

JPG- An abbreviation for Joint Photo graphic Experts Group, the committee that created this file type. It is best used for photographs or images that have gradients. Jpgs do not sup port transparency and cannot be animated.

Lab- Stands for Luminance, a, b, where a is the amount of green/red in an image and b is the amount of blue/yellow. An L of 0 (zero) would be seen as black, 100 would be white. a and bare measured on positive/negative scales, with negative a being green and positive being red (or magenta) and negative b representing blue while a positive value indicates yellow. Lab is supposed to simulate more scientifically and accurately how people view colors and which colors humans can actually inter pret. It was developed by Commission International ed’Eclairage (translation: International Commission on Illumination), or CIE and is some times referred to as CIELAB.

Loupe- A little magnifying glass just like jewelers use to exam ine gems (pronounced loop). Pressmen use this to check the registration on a print job and make sure all the little ink dots are lining up on top of each other like they should. Designers can use this tool at the press check.

Loss less- The opposite of lossy, loss less describes file types where there is no image data deleted or erased when that data is stored. Image for mats like GIF, PNG and TIFF (with out compression) are considered lossless.

Lossy- Describes file types where compression is applied and image data is deleted or erased in order to decrease the files size. If done properly, this loss is not critical and it makes the image much smaller, which helps to speed up down load time and saves hard drive space? JPG is a file for mat that is lossy.

Mock (or Mock-up) A close-to-reality rendition of a project. This is often used in packaging design to show how a pro posed design would look on a box or other type of package. It is used to give the client/stakeholders a better idea of the final product. It can also be used in web design to show a rough approximation of what the final web site would look like in a screen shot of a browser.

PDF- Portable Document Format. This file type is often used to send print materials to a print shop. It is also very useful for web, when there are multi-paged documents, reports, forms, etc. that have been designed in a specific format, which cannot be easily translated into HTML. Note: PDF is an Acrobat file, not an “Adobe” file. Adobe is a company and the manufacturer of Acrobat, Photoshop, Illustrator, InDesign and many other pro grams related to media design and production.

Picking- When ink is too sticky; it can take bits of the paper with it as the paper travels through the press. This is the opposite of slurring and both should be looked for at a press check.

Pixel- Picture element. It is the basic digital component that makes up a raster/bitmap image.

PNG- (PNG-24) Portable Network Graphics are the ideal web graphic file types. They are completely loss less and they sup port alpha transparency. PNG-8 is essentially a GIF.

Press Check- A press check is where the designer goes to the print shop while the job is being set up to print. The printer will give you a press sheet to look at and this is the final time to check color and print quality, not the time to check for typos; that should be done with the proofs! When you go to a press check, in addition to accurate color, look for crossovers, slurring, picking, ink smearing, hickeys, bleed through and registration (ask to use a loupe). Circle any problems you see and ask for another press sheet. It’s ok to ask for the pressman’s advice on fixing color (sincere flattery will do wonders for get ting what you want!) and don’t be afraid to go back several times and ask for adjustments and a new press sheet.

Principles of Design- The Principles of Design are Unity, Balance, Contrast, Economy, Direction, Emphasis, Proportion and Rhythm

PPI- Pixels per inch is part of how you would define the resolution of an object that is screen-based. Some use DPI and PPI inter change ably, though this is technically incorrect.

Print- Print encompasses all design that is not on a screen in its finished state. Print can include brochures, reports, post cards, menus, bill boards or identity systems (letter heads, envelopes, business cards).

Printer Spreads- The order in which the printing company will layout pages, generally for a multiple page composition. The pages are not printed in the order that they appear in the final book. For example, in a 16 page book–assuming the front cover is page 1 and the back cover is page 16–page 2 and page 15 would be printed on the same sheet of paper next to each other. Pages 3 and 14 would be on the next sheet, on the other side of that same sheet goes pages 4 and 13, etc, so that when the pages are nested in the final book, they appear in the correct order. The process of set ting pages up in this order is called imposition. Compare this with Reader Spreads.

Process Color- Also known as CMYK

PSD- Photoshop Document extension.

Photoshop- A design program used to manipulate raster (bitmap) images.

Raster- A raster or bitmap image is made out of pixels. Raster images are typically photos, but they can also be illustrations that have been turned from vectors into pixels.

Reader Spreads- The pages of a com position set up in the order a reader would see them, page 1, 2, 3, 4, etc. Compare this to Printer Spreads.

Render- A render is a rendition or draft of a project. When some one talks about render, it can mean the project’s appearance: “It’s a pencil render” means it’s a sketch. A render can also be a draft: “I’m waiting for the 3D model to render” means the computer is calculating the appearance of the model, which can include textures, lighting, transparency, etc. A “final render” is the finished project, ready to be presented, printed or shipped.

Resolution- There are so many different meanings for “resolution” depending on who you are and what you do. The best definition I’ve read is from Real World Photoshop. The authors define resolution as “the number of pixels in each unit of mea sure.” There are two main ways to discuss resolution: you can talk about resolution in terms of image size: “The document is 5x7 inches at 300 ppi,” or you can talk about resolution as dimensions: “The document is 1500x2100 pixels.” Some people talk about resolution and want to know the file size, but then you have to start becoming familiar with a new way to measure things. Remember the image size dialog box in Photoshop? There is an input field for Resolution (the pixels per unit), and also a drop down box for the unit of mea sure, which is separate from the fields for the width and height of the image. In reality, these are all just different ways of talking about the same thing: the amount of image information. So if some one asks you the resolution of an image and you merely reply, “300 ppi,” you’re not telling the whole story.

RGB- Red, Green and Blue are a monitor’s color space. RGB is considered an additive color space, meaning to make white you add all the colors together. You view the world in RBG, not CMYK.

Slurring- If ink has a low “stickiness,” it can create a soft or blurry look. Look for slur ring, which is the opposite of picking, on press checks.

Spot Color- Inks that are not mixed from the four process colors. They are used for items, like logos, that need to be a consistent color no matter how or where they are printed. Any time you add an extra ink to a print job, it increases the price. Metallic inks are also spot colors.

Stock- You often hear terms like “stock photography” in a graphic design environment. Stock refers to some thing that is pre-made–photos that have already been taken in a variety of general scenarios with a general selection of smiling people, illustrations or icons with a general or abstract theme. Notice the term general here; you probably won’t ever find that perfect artwork you need, but it’ll be close enough and cheaper than, say, staging your own photo shoot. (Stock can also refer to the paper a project is printed on)

TIFF- The raster version of EPS. TIFF can be a loss less for mat if you choose the No Compression option, which is the default in Photoshop. TIFF supports percent ages of opacity like PNG and is ideal for the final file type of pixel-based images for print. You can also have layers in the TIFF format, but this will increase the file size.

Thumbnails- Small scale rough sketches of a design concept. They are among the first stages of the creative process. Before thumb nails, designers often collect a design or creative brief, do research and/or word associations and some times wire frames as a sep a rate step. Thumb nailing is a process that designers use to quickly illustrate ideas for a design. The longer a designer spends in the thumb nail stage, the more detail that is put into these sketches, the faster the next stage, comps, goes. Thumbnails are to design what an out line is to writing a paper.

Type face- A type face is simply a design or look of letters and maybe numbers. It does not include glyph and character variations or weights like bold (think display or ornamental faces such as Grave Ornamental or Willow), and may not even include numbers or upper or lower case letters (obviously it would have to include either upper or lower case letters, but not necessarily both). A type face also does not mean that a design is complete; many movie title treatments are merely type faces (only the letters in the title have been created), though some have been developed further into fonts.

Vector- Vectors can most readily be recognized as illustrations, particularly from programs like Illustrator or Free hand. But not all illustrations are necessarily vector-based. Vectors work by defining points and what fills the space between those points in a document and they are stored as mathematical formulas. Vector files (like Illustrator files) are fractions the size of raster files because there is less data needed to create the images.

Wire frame- A wire frame is a basic lay out with out design elements. It is generally used in web design as a means to plan where navigation and con tent will sit on the page.

Using InDesign Multiplace with Adobe Bridge

2009-08-15T22:40:00.000-07:00

This tutorial shows a method for using Adobe Bridge with the Multiplace command in InDesign CS3 and CS4.

This video requires Adobe Flash Player.

Conditional Text and InDesign CS4

2009-08-15T22:13:00.000-07:00

InDesign has always supported the use of layers, but layers don’t always cut it when working with text. You can put a text frame on a layer and turn that layer on and off as needed, but it’s an all or nothing approach. What if you want to show and hide individual words or paragraphs and have the text automatically rewrap when you show or hide those words? With conditional text, it’s a breeze.

1 [FIRST, WE’LL NEED A NEW DOCUMENT]
You can certainly use one of your existing documents for this, but if you’re going to follow along, you might want to go ahead and create a new document. Choose New>Document from the File menu. One page should be fine.

2 [CREATE A LARGE TEXT FRAME]
In this example, we’re going to lay the foundation for a model release form that will vary depending on whether the model is an adult or a minor. So create a large text frame using the Rectangle Frame tool (F).

3 [KEY IN TEXT FOR YOUR FIRST CONDITION]
Choose the Type tool (T), and at this point you can key in all of your text that will be a part of your first condition. For this example, we’re going to key in the bulk of the text for the release form as if it were for an adult model.

4 [OPEN THE CONDITIONAL TEXT PANEL]
Conditional text is a new feature in InDesign CS4, and it has its own panel. You can open it a couple of ways: you can simply choose it from the Window>Type & Tables menu or you can select the built-in Book workspace from the drop-down menu at the right side of the Application Bar.

5 [CREATE A NEW CONDITION]
You can set up as many conditions as you need. Think of conditions as layers for your text within a text frame. So our first condition will be for models 18 and over. This will be the language in the agreement that states that the model is at least 18 years old and doesn’t need parental consent to sign. Click the New Condition icon at the bottom of the Conditional Text panel. Name your condition in the resulting dialog and click OK.

6 [APPLY YOUR NEW CONDITION TO YOUR TEXT]
With your new condition created, the next thing you need to do is apply it to all of your text that matches that condition. Don’t worry about the text that you want to remain the same for all versions of the document, as it automatically defaults to Unconditional. You only need to apply the condition to the text that you want to show and hide. So in this example, we’ll highlight “I’m of full age” and then click the Over 18 condition to apply it. We’ll also repeat this with “Model’s Signature.” You should see a wavy blue line under any text you applied the condition to.

7 [HIDE YOUR FIRST CONDITION]
After you’ve highlighted each instance of your first condition and applied it in the Conditional Text panel, you’re ready to key in the text for your second condition. However, it would be much less confusing if the first condition’s text wasn’t showing. So click the Eye icon in front of your first condition to hide all the text matching that condition. This will also help you find anything you may have missed.

8 [KEY IN THE TEXT FOR YOUR SECOND CONDITION]
Now that you’ve hidden the text for your first condition, it’s time to key in the text that will be used for your second condition. In this case where it originally said, “I am of full age,” we’re going to key in the text “I’m under the age of 18 and therefore my parent or legal guardian will sign.” We’ll also type “Parent’s Signature” where “Model’s Signature” originally appeared.

9 [CREATE YOUR SECOND CONDITION]
Now that your text is in place for your second condition, let’s create it. Go to the Conditional Text panel, click the New Condition icon, name your second condition (in this case “Under 18”), and click OK.

10 [APPLY THE SECOND CONDITION TO YOUR TEXT]
Just like you did in Step 6, you’re now going to apply your second condition (Under 18) to the new text. Using the Type tool (T), highlight each instance of text matching your second condition, and then click your second condition in the Conditional Text panel to apply it. You should see a red wavy line this time. (Note: When you’re creating a new condition, you can change how it’s going to be highlighted in your document by changing the settings in the Indicators section of the New Condition dialog. Or you can double-click an existing condition in the Conditional Text panel to change those options.)

11 [SHOW AND HIDE YOUR CONDITIONS TO TEST]
At this point you have an InDesign document working with Conditional Text. You can show and hide either condition to allow for printing and exporting. You can use this technique for a variety of situations, not the least being price lists. The beauty here is that your text will automatically rewrap based on which condition is showing.

12 [CREATE MORE CONDITIONS AND APPLY THEM]
Now that you know how to create conditions and apply them, it’s time to make it a little more interesting. Let’s say it’s a paid shoot versus a trade. Either of those conditions could apply to either of the previous two conditions. So it could be an over 18 model doing a trade or an under 18 model doing paid work, or vice versa. Create two new conditions revolving around the first line that talks about pay.

13 [USE CONDITIONAL TEXT SETS]
When you have two or more conditions that could be used together, then it’s time to break out conditional text sets. A conditional text set is a group of conditions that can be turned on all at once. Choose Show Options from the Conditional Text panel flyout menu. Then turn on the conditions that will apply to your new set. Example: Paid and Over 18. Then from the Set drop-down menu, choose Create New Set. Now you’ll have a set to choose that will automatically turn on those two conditions and turn off the others. You can make as many sets as you need.

Website Design Tips Using Photoshop CS4

2009-08-15T21:07:00.000-07:00

How to make your next website design pop!

Web design is one of those areas that, when done right, you just know it. The finished site looks refined and well done—it pops! There are a number of ways that you can achieve this by polishing off your design in Photoshop. Here we look at some of the ways to do just that.

1 [LAY OUT THE FUNDAMENTALS]
Before you go about making your website pop, you must first have your fundamentals in place. By this stage you should have done the research, laid out your website appropriately, and done most of the basic design work—but you haven’t applied the polish. In the following example, we’re going to look at some techniques used for a chocolate delivery website; however, these same techniques can be applied to any website.

2 [CHECK ALIGNMENT AND SPACING]
Alignment and spacing in website design creates order, organizes the page, and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also take note of the even spacing around the boxes and text. Use guides in Photoshop to ensure all of your elements are aligned. To add a guide to your document, drag it from one of your rulers (press Command-R [PC: Ctrl-R] to turn rulers on).

3 [APPLY ANTI-ALIASING TO TEXT]
Something that’s often overlooked when designing for the Web is anti-aliasing text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of the anti-aliasing options in your Options Bar (or Character panel). You can choose between None, Sharp, Crisp, Strong, and Smooth. Experiment to see what works best, as different fonts and sizes will yield different results; however, the Sharp setting usually prevails in most cases.

4 [ADD A 1-PIXEL STROKE]
Something that really makes a difference in making a website pop is the use of a 1-pixel stroke inside borders and lines. Take a look at the zoomed-in screenshot above—see the inner purple line that runs alongside the inside of the box on the right? These stroked borders really add that extra crispness to the design as it provides extra contrast to the surrounding elements and gives the design more depth. You can add two strokes by selecting the object, choosing Edit>Stroke, and applying the 1-pixel stroke to the Inside. With your selection still in place, go back to Edit>Stroke and apply your second stroke to the Outside.

5 [ADD SUBTLE GRADIENT EFFECTS]
Gradients are popping up everywhere in Web design and for a reason—they add depth and real aesthetics to the design. Unlike print design where gradients seem flat, onscreen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen, so to speak. Use Gradient Overlay in the Layer Style dialog to create these nice subtle (emphasis on subtle) effects.

6 [ADD SUBTLE DROP SHADOWS]
Use subtle drop shadows in conjunction with the gradients and stroked borders. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other and pop out at you. Notice in the screenshot above that the logo, text, and boxes all have subtle drop shadows applied to them, which break them away from the other elements. You can use the Drop Shadow layer style to achieve these effects—but make sure you use them in moderation.

7 [HIERARCHY & CALL TO ACTION]
When someone first visits your website, what is the first thing they’re going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project; however, now is a good time to go back and reflect on these decisions. Can you adjust the colors, size, or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the “Pick a Basket” button, which is placed conveniently after the main opening slogan.

8 [COLOR CORRECTION & SHARPENING]
In Web design, photos, icons, and images are usually quite prominent, so you should ensure that they’re of the highest quality. Check the color balance, sharpness, and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Levels, Unsharp Mask, and Curves in Photoshop. A quick search at www.layersmagazine.com will yield results on how to do this—these functions go beyond the scope of this tutorial.

Less Is More

In Web design, the old saying goes, “less is more.” After completing your website design, have a break and come back to it. Then ask yourself these questions to see how you can further improve your site:

1. Is there anything that I can remove, fix, replace, move, change or edit?
2. Does one element take up too much space or draw too much attention?
3. Are there too many colors?
4. Is the site balanced?
5. Is there consistency?
6. Can I make use of more white space?

When you set out to design your next website, you can also ask yourself these questions:

1. Do I have the basic fundamentals in place?
2. Can I improve my alignment or spacing?
3. Have I used the appropriate anti-aliasing?
4. Can I sharpen my images or text with strokes or borders?
5. Can I give more depth to the page by using gradients or drop shadows?
6. Is there a clear hierarchy with a call to action?
7. Are all of the images color corrected, balanced, and sharpened?
8. And last of all, ask yourself—does the website pop?

Before

After

Sources: http://www.layersmagazine.com/website-design-tips-using-photoshop-cs4.html

Useful Tips for Effective Web Design

2009-08-15T21:06:00.001-07:00

Listed below are some useful and rather important tips for designing a professional and high quality web site:

Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read our article on Web site Navigation Tips.
Clean Layout Design: A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.
Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
1. Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing, Line-through Effect
2. Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
3. Links without Underline: Use CSS Styles to display links without the appearance of the underline.
Optimum Load Time: Make sure your load time is low. For this you must:
Minimize Graphics, Flash and scripts: They hugely increase your file size.
Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts.
Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
Read our article Tips for a Fast Loading Site for more.
Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn't look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
Read our article Designing for all Screen Resolutions for more.
Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.
Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.

10 Usability Principles to guide you through the Web Design Maze

2009-08-15T21:01:00.000-07:00

Motivate
Design your site to meet specific user needs and goals. Use motivators to draw different user "personae" into specific parts of your site.
User task flow
Who are your users? What are their tasks and online environment? For a site to be usable, page flow must match workflow.
Architecture – it's 80% of usability
Build an efficient navigational structure. Remember – if they can't find it in 3 clicks, they're gone.
Affordance means obvious
Make controls understandable. Avoid confusion between emblems, banners, and buttons.
Replicate
Why reinvent the wheel? Use ergonomically designed templates for the most common 8-12 pages.
Usability test along the way
Test early in design using low-fidelity prototypes. Don't wait until the end when it's too late.Know the technology limitations Identify and optimize for target browsers and user hardware. Test HTML, JavaScript, etc. for compatibility.
Know the technology limitations
Identify and optimize for target browsers and user hardware.Test HTML, JavaScript, etc for compatibility.
Know user tolerances
Users are impatient. Design for a 2-10 second maximum download. Reuse header graphics so they can load from cache. Avoid excessive scrolling.
Multimedia – be discriminating
Good animation attracts attention to specific information, then stops. Too much movement distracts, slowing reading and comprehension.
Use a stats package
Monitor traffic through your site. Which pages pique user interest? Which pages make users leave? Adjust your site accordingly.

Ten Steps on the Path of Page Layout Enlightenment

2009-08-12T00:39:00.000-07:00

Rule 1

KISS(Keep it simple stupid)

Rule 2

Take advice, you never know too much that you can't take the advice of others, look at other magazines, newsletters etc, and especially, the rest of this list...

Rule 3

Determine what kind of document you're producing. If we can break it down into two kinds:

... you have to read me, so it really doesn't matter how I make it look, and I don't give a damn anyway...

... please read me, I have something to offer and I hope you'll take the time to read on...

for those with the first kind of document, just stop reading now, for others...

Rule 4

Is it a formal or informal document?

Formal documents need to be well structured, look as if they mean what they say, keep them consistant in terms of fonts and layout... be businesslike

Informal documents can be looser, make them inviting, choose an informal (optima etc) font, lots of white space. Make the reader want to read on.

Rule 5

There are a number of socially correct mechanisms to make sure that whatever type of document you are producing looks good ...

One font for body text and one for headline text ...

Never put more that one space between words, especially after punctuation. ...

Respect other languages, use the correct accents when appropriate ...

use the correct quotation marks (not feet and inches symbols) ...

be consistant with paragraph spacing (first line indent, inter paragraph gap) ...

not too much hyphenation (if any) ...

beware of widows and orphans...

respect your reader

Rule 6

Select an appropriate format for the type of document you are producing. A5 booklet, A4 report, A3 broadsheet etc.

Rule 7

Consider the reproduction mechanism. ...

If you are photocopying the end document, beware of the limitation of tints on any specific photocopier (hint: fine tints smudge on some copiers) ...

Professional printing of the final document: choose your paper with care, ask the advice of your local printer (print office) before getting too deep in the production process. If they have preferences regarding the tools they use for preparation of documents, consider them (ie Pagemaker etc).

Rule 8

Keep backups (copies) of items as you go along, make sure that you have copies of all documents (pictures, logos, main document etc) well secure. Sodd's law will ensure that something untoward happens in the last hour of your deadline.

Rule 9

Having selected a publication format, edit to that format, not the other way around. Do not try and make the format fit the pieces...

Rule 10

Remember Rule 1

Web Design Tips

2009-08-11T01:28:00.001-07:00

If you're looking for web design tips, this section is for you.

Developing a professional web site will play an important role in your success. However, finding web design tips to assist you can be difficult.

Although HTML tutorials will provide you with an overview of HTML and web site design, unfortunately, that's about it. They usually don't provide you with the little web site design tips and tricks that are used to create special effects within your web pages.

Although learning HTML and some basic web site design techniques is very important, if you want to add special effects to your web pages, you will need to learn some additional coding techniques, such as using CSS and JavaScript.

The following web design tips provide a wealth of information to assist you in many aspects of web site design. You will find web design tips and advice, HTML tips and codes, CSS codes and JavaScript codes to assist you in creating special effects within your web pages.

However, please ensure that you use these web design tips and codes cautiously. Make sure you don't overdo it and use too many special effects, as you don't want to offend your visitors. The key to creating a successful web site is to only use tips and codes that will enhance your visitors experience on your web site.

When you're ready to begin, simply click on the links below to find the web design tips and codes you're looking for. Once you locate a special code, copy and paste it into the HTML portion of your web page where indicated within the instructions on each web page.

How to Create a 3D Leaf from a Texture Photograph

2009-08-11T01:03:00.000-07:00

Step 1

To begin, you'll need to find a photograph texture of a leaf. I have chosen this one from lostandtaken.com by a a photographer named Caleb Kimbrough.

Step 2

Load your new found texture into a new project. With the Rectangular Marquee Tool (M) selected, Right-click on your layer in the artboard and select Free Transform. Once you have done that right-click on the texture again and select Warp. I have labeled each corner respectively as we will be moving them around quite a bit.

Step 3

Now that you have your layer in Warp mode, click and drag the corner (a) down 1/3 of your grid.

Step 4

Now click and drag the corner (point c) up 1/3 of your grid. Already our leaf is beginning to take on it's natural form.

Step 5

Each corner has 2 arms that you can move in order to manipulate your layer even further. Pull the corner's (point a) left arm down as shown below.

Step 6

You should give a sharper edge to your leaf. Something like this. Press Enter to finalize the Warp.

Step 7

You should have a sharp point on your leaf after the last several steps. However, your point may be a bit bent due to the Warp Tool curling. Fix this by using the Polygonal Laso Tool (L), selecting the excess curl and pressing the Delete key.

Step 8

Now lets focus on the other end of the leaf. Use the Warp Tool again (see Step 2) and drag point d as shown in the picture below. You'll want to get both of the arms of point d to be parallel.

Step 9

Now do the same with the top-right corner (point b). Also, if you want you can tweak the leaf into whatever position you require by holding your mouse down and dragging the inner grid, as well as the other points.

Step 10

To add a bit of additional perspective Right-click on your leaf and select Free Transform. Now hold Alt + Shift and drag the top-right corner, then move it left a bit. This will give the leaf a bit of distance perspective.

Step 11

If you want to make the leaf drop at its point, use the Rectangular Marquee Tool (M) and select only the left half of the leaf. Then proceed to Free Transform > Warp. This will allow you to move that half of the leaf without warping the right half. Make sure not to move the points that are in contact with the leaf that is not selected as this will cause a tear between the two pieces.

Step 12

Next, duplicate the layer with your leaf on it, drag that layer below your original leaf layer. Warp it a little to show some discrepancy. Repeat this process as many times as your desire. Play with it and have fun.

Step 13

On each layer you can add a simple drop shadow by double-clicking on the layer and checking the box labelled Drop Shadow. To give leaves even more depth, make sure you adjust the Distance, Size, and Opacity accordingly. The larger leaf has an Opacity of 63%, a Distance of 299px, and a Size of 84px (this is on an artboard sized at 2590px by 1943px at 72px per inch). If you have a leaf that is directly on top of another, you will want to have the distance significantly lower, as well as the size. It should be more sharp and distinct.

Step 14

Next I added a quick and easy Bevel and Emboss. It is often frowned upon to use this but it gets the job done quick. You can paint the sunlight hitting the leaf if you desire, but this is only an intermediate tutorial.

Double-click on the desired layer and check the box Bevel and Emboss. Change your Depth to 100%, Size to 65px, and Soften to 0px. Also you may want to lower the Opacity of the Highlight Mode as well as the Shadow Mode.

Step 15

You may want to add some depth of field. To do this I recommend you use a simple Gaussian Blur. Select the leaf that is below the rest of them. Right-click on the layer in the Layer Window and select Convert to Smart Object. Now select Filter > Blur > Gaussian Blur and set it to 2.6 pixels.

A Smart Object will allow you to change the settings of your applied filters non-destructively. If you are really thoughtful, you could do this with the Drop Shadow and the Bevel and Emboss on the leaves...repeat this process with the other leaves, but lower the blur as the leaves get closer to the largest leaf. We want that to be the focus.

You can also use the paint brush to mask the Smart Filter on the Smart Object. If you select the Smart Filter on your Smart Object layer, select the color black and paint on the artboard with the Paintbrush Tool. You will find that it removes the Gaussian Blur (or any other filter you applied to your Smart Object) in the area that you paint black. I did this with the largest leaf and left only the edges slightly blurred.

Final Image

There you have it. A quick and easy display of greenery. You can really play around with this and do a lot of different types of leaves and positioning. I hope you've enjoyed this tutorial. Half the fun is just messing around with the Warp tool. The final image is below. You can view it larger here.

QuarkXPress Tips and Tricks

2009-08-06T23:46:00.001-07:00

The Best Quark XPress Shortcuts

Quark has a lot of keyboard shortcuts, but most of them aren’t mnemonic, so they are hard to remember. Here’s a list of the ones you’ll probably want to suffer to learn anyway. With one exception (noted below), these work in both version 3.3 and 4.0.

Ctrl+X, Ctrl+C, Ctrl+V = Cut, Copy and Paste the selected item (respectively). What you can select depends on the tool you are using.
Ctrl+Z = Undo. Everyone’s favorite “oops” command. You get one…count it…one level of undo, so be careful.
Ctrl+Shift+B = Apply Bold. Select text press the combination and lo your text is bold.
Ctrl+Shift+I = Apply Italic. Same idea as adding bold, except it adds italic instead.
Ctrl+J = Go to a certain page. Why J? Maybe it stands for jump? I just dunno.
Shift+F8 = Toggle the Item and Content tools. You get really sick of switching between the two using the toolbox.
F5, Shift+F5 = Bring to Front and Send to Back respectively.
Alt+clicking on a style name = removes local formatting and applies the style. (This command changed in version 4.0 — it used to be Shift+style name.)
Ctrl+0 = Zoom to fit in the window. If you have a big monitor, you can sort of still read the text.
Ctrl+1 = Zoom to actual size, so you really can read the text.
Ctrl+Shift+F = Opens the Paragraph Formats dialog box.
Ctrl+E = Get picture or get text (depending on the type of box that is selected).
Alt+Ctrl+Shift+F = Make an imported picture fit in a picture box, without changing the aspect ratio.

Revert to Saved

As noted, the folks at Quark give you just one level of undo. A way around this limitation (sort of) is to use the Revert to Save command. Before you decide to attempt anything weird, save the file. Then commit the weirdness. That way, in the event of a big design failure, you can choose File, Revert to Saved to return to your last good (i.e., pre-weird) version of the document.

Use Libraries

It’s sad how few people take advantage of Quark’s libraries. Two minutes of setup can save you eons of repetitive formatting. For example, supposed you have a standard figure box and caption that you use over and over in a newsletter. Rather than redrawing them every time you need a figure, create a library and drag the formatted boxes into it. Then whenever you need to add a figure, you can drag the perfectly formatted objects into your layout.

Apply Styles in Your Word Processor

An easy way to speed up applying styles is to just not do it in Quark at all. Set up the Quark file with the same style names you use in your word processor (or vice versa). The key is that the style names must be exactly the same. Then when you choose File, Get Text, make sure that Include Style Sheets is selected. You’ll get a bunch of messages (one for every style) asking you if you want to use the existing Quark style. Say you do. Your text arrives in the Quark file already formatted. Cool.

Create a Jump Line

If you have an article that continues on another page, you may want to include a “jump line” to tell your readers where it’s continued. Create a new text box and type in “continued on page” or something like that. For the page number, press Ctrl+4 instead of typing in a page number. This command inserts a code for the page number of the next text box in the linked chain. If you rearrange the pages later, the jump line will automatically update.

Move to the Next Box

If your layout includes articles that continue on other pages an easy way to have Quark move you to the next page is to place your cursor at the end of a text box. Then hit the right arrow key. Quark jumps you to the next text box in the chain, no matter whether it’s on the next page or 20 pages later in the document.

Find/Change Special Characters

As you can in some word processors, you can use Quark’s Find/Change function to look for unusual items such as tab characters, spaces, or paragraph. For example, if you (or a wayward author) type two spaces instead of one after a period, you can use Replace to quickly replace two spaces with one space. Or if you have documents with a lot of extra paragraphs, you can search for extra paragraph returns.

These are a few of the special characters you can enter in the Find what and Change to boxes:

\t = Tab
\p = Paragraph
\n = New line
\c = New column

For example, many times people indicate a bullet with an asterisk followed by a couple of spaces. If you want to find all the asterisks that should be turned into bullets, you would enter “\p* ” into the Find what box.

graphic design | web design

Prepress tips for graphic designers

Web design tips & tricks

Web design tips & tricks

Vertical align for navigation lists with multiple lines

Making web pages extend to the bottom of the browser window

A fix for float-margin inconsistences across browsers

How to install Apache (and PHP+MySQL) on Windows

Optimization of JPEG images: good quality and small size

Tables vs. Definition Lists

Standard (and valid) DOCTYPE definitions

CSS Image replacement for submit buttons

Common fonts to all versions of Windows

Using relative font sizes in web pages

15 mac applications for web designers

How to Create a Flag Graphic with Type in InDesign

Final Image Preview

Step 1 - Draw a Curve in InDesign

Step 2 - Prepare the Curve to Receive Path Type

Step 3 - Duplicate the Curve

Step 4 - Duplicate the Curve Three More Times

Step 5 - Place the Text on the Top Curve

Step 6 - Thread the Text to the Next Four Curves

Step 7 - Skew the Type

Step 8 - Format the Type

Step 9 - Remove the Stroke from the Curves

Step 10 - Create Two Colors

Step 11 - Create a Gradient

Step 12 - Apply the Gradient to the Text

Conclusion

Graphic Design Glossary, Terms and Definitions

Using InDesign Multiplace with Adobe Bridge

Conditional Text and InDesign CS4

Website Design Tips Using Photoshop CS4

How to make your next website design pop!

Less Is More

Before

After

Useful Tips for Effective Web Design

Listed below are some useful and rather important tips for designing a professional and high quality web site:

10 Usability Principles to guide you through the Web Design Maze

Ten Steps on the Path of Page Layout Enlightenment

Web Design Tips

How to Create a 3D Leaf from a Texture Photograph

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Final Image

QuarkXPress Tips and Tricks

The Best Quark XPress Shortcuts

Revert to Saved

Use Libraries

Apply Styles in Your Word Processor

Create a Jump Line

Move to the Next Box

Find/Change Special Characters