• Create 4 Pages – (Home, About, News, Contact, Portfolio, Shop, Recent Items, Featured Items)
• Design for the area inside the iphone, 320px X 480px

Downlaod the iPhone files here.

Download Tab Icons here.

Assignment:

Design a Logo and Web page for the local company, Cotton Blossom. They like the look of KateSpade.com, BlackChandelier.com and ilovebastille.com. Try to bring their bright colored clothing and storefront into your Design.

Objectives:

• Design a full color Logo for Cotton Blossom. Consider their Facebook Page and clothing line in your design.
• Design a Home Page for Cotton Blossom. Include Twitter section, blog section, contact form, banners, logo, tagline and about us section.

Criteria:

• Logo Design for Facebook Page, Store Windows and Print Media
• Website Homepage mockup

Graded on:

• Technical requirements (listed above)        50%
• Timeliness                                                           20%
• Aesthetics                                                            20%
• Creativity within constraints                          10%

Ok, so the very first thing we need to do is create a New Document. Depending on where you are planning on getting your cards printed, you may need different dimensions. Most printers use a default card size of 90mm x 55mm. (3.5″ x 2″)

When sending things off to printers however, you need to add a sort of border around the image called aBleed. A bleed is basically the space on the edges of your design where the image keeps going past where the printer is going to cut the paper. That way if the cut lands a mm to either side you don’t wind up with blank paper at the edges. How much space you leave for bleed also depends on your printer. Generally speaking 3mm – 5mm is a good amount of bleed.

Because of a quirk of Photoshop (which you’ll see later) we’re going to use a value of 3mm. So when creating the image, instead of making it 90mm high we are making it 90mm + 3mm bleed on the left + 3mm bleed on the right = 96mm. Similarly with the width, we’re making it 55+3+3 = 61mm.

Note also that because we are making something for print you should set the Resolution to 300dpi and Color Mode should be set to CMYK. We’ll talk more about the color mode later, but with the resolution you should note that 300dpi basically means there is more image information available so you get a sharp print out.

If you ever have to make a huge poster, you can sometimes get away with as little as 120dpi, but it really depends how far away the person will be looking at your work from. If you are printing 120dpi, the quality up close will be pretty bad. If it’s a giant poster (think meters rather than centimeters), then you can get away with it. Anyhow because this is a business card, we should make it 300dpi so it’s a nice, high-quality print.

Step 2

Once the document is created, the first thing we need to add are some guides to show us where the edges of the business card are and where the bleed starts. So first of all press Ctrl-R to switch on your rulers. Now to add the guides, you can either click on the ruler and drag guides out on to the document, or for a more precise method, go to View > New Guide and then give it a Horizontal position of 3mm. Repeat again with a Vertical position of 3mm. Then repeat twice more with Vertical / 58mm and Horizontal / 93mm.

Step 3

You should now have a blank canvas similar to the one below with four guides, each 3mm away from the edge.

Step 4

Now go to File > Print with Preview and you should see something like shown below. If you don’t have all the options, click on More Options and they will appear. Check the box which says Corner Crop Marks, then click on the button that says Bleed and set it to 3mm. Note that for some reason Photoshop doesn’t let you go much higher than 3mm for bleed. I don’t really know why they’ve put an artificial cap on it, but maybe there is some amazing reason that I don’t understand.

Anyhow one thing you should do (that I just realized I didn’t do in the screenshot) is to untick Show Bounding Box.

Once you’re all done, you should be able to print to a PDF, do the same for the back, and deliver that to your printer. Note that to print to PDF, you need to have a copy of Acrobat installed (not just the free Acrobat Reader, but the full version). If you have this, then you’re all finished now!

If you don’t have Acrobat, never fear… all is not lost!

See Article…

Assignment:

Design and print your own business cards for you to hand out to prospective clients. Must include full name, phone number and email address at least (other info is optional) also include a bleed on at least one side. Once you like your design, fill an 8.5×11” sheet with your card using appropriate imposition. Use guides and crop marks to show where to cut.

Objectives:

• Design a full color business card
• Understand basic imposition

Criteria:

• 1 completed business card: 3.5×2”, laser printed on heavy cover stock, cut, must include one bleed. Does not need to be mounted.
• 1 full page 8.5×11” sheet printed with 10 business cards in correct imposition. Include crop marks.
• A digital copy of your file saved as either a pdf or an eps, fonts embedded or turned to outlines.

Graded on:

• Technical requirements (listed above)            50%
• Timeliness                                                            20%
• Aesthetics                                                            20%
• Creativity within constraints                                    10%

Production Methods topic for March 17, 2011

Apple released its ipad 2 last Friday. Your discussion challenge is centered on that product. Your group is to role play that you are an agency hired by Apple to design an ad for the City Weekly to encourage ipad 2 sales in Salt Lake City.

For that ad, you need to come up with a general design strategy (if you have a picture in the ad, what is the picture of; if the ad is all copy, what does the copy say, etc.) for what will be a full page ad in City Weekly.

For the ad, you need to come up with a key message and a headline and body copy which reflect that key message and “sell” the ipad 2 to your target audience.

To learn more about the ipad 2, go to www.apple.com. The site has all the information you could possibly need to include in your ad. Pick and chose wisely.

All information in the ad must be accurate so don’t just make stuff up.

The ad is going to run Friday, March 25, 2011.

Download The iPad GUI PSD Here (9.9MB)

iPhone 4 GUI PSD (Retina Display) (20.8MB)

ONE COLOR GREETING CARD

Objectives:

Experiment with simplest type of printing, desktop printer and photo copier. Explore the possibilities of creativity within a tight budget and strict technical constraints.

Due: Thursday, March 3rd

Requirements/Specs:

• 1 completed card: laser printed or photo copied on card/cover stock, front and back. Cut to size.
• Black ink on white or colored paper.
• Does not need to be mounted.
• 2 black and white originals representing color sep proofs for client to run through their copier.

Graded on:

• Technical requirements                        50%
• Timeliness                                                20%
• Aesthetics                                                 20%
• Creativity within constraints              10%

Download Files

If you have read Lesson 2, “The Secrets to Full Color Screen Printing”, than you already understand the underlying principles to 4 color screen printing. In that article we discussed the principles of the CMYK color model, color separations, halftones, and lines per inch (LPI). In this tutorial, we are going to take what we have learned, and using photoshop, quickly create color separations for output to transparencies for screen printing.

1.) We are going to start off by firing up Adobe Photoshop, and open the registration.psd.

Alternatively, if you would like to start from scratch, create a new file. This file will be 8.5” x 11” at a resolution of 600dpi in the CMYK color mode. Click OK and lets get started.

2.) Next, place the artwork that you plan to use for the final screen print into the registration.psd. File > Place. We are going to want the largest image possible in terms of resolution in order to get the best quality out of our printed piece.

3.) I am choosing a vector image, and while I would have better results going with maybe 5 color spot print, this will work fine for what we are doing. Also, being a vector image, I have the freedom to scale this as large as I like for our final screen.

4.) Because I eventually plan to print this onto a colored shirt, I will need to create a white spot plate. I am going to select everything on my Chick layer, and on a new layer fill that selection with white by pressing CMD+Delete (or ctrl+backspace on a PC).

5.) I am also going to create a quick drop shadow for my little chick. Because I want to print this drop shadow right onto the shirt, creating just a dark spot beneath the chick, I do not need to have a white background. So, I will create a new layer under my white spot layer, and with the circle marquee, create a small, horizontal oval. I am going to fill this with 20% black.

6.) I am also going to quickly add some text to my design. Using the text tool, I am going to quickly add a title in century gothic under my chick. I hit the color box at the top, and using the eyedropper sample the orange from my chick to be used with the text.

7.) Again, because I am going to want this text to be very visible, I am going to have to add it to my white spot plate. Again, I CMD+click (ctrl+click) the text layer to create my selection and after selecting the white spot plate layer, I hit CMD+delete (ctrl+backspace) to fill it with white.

8.) To make this process as easy as possible, lets quickly make our white spot into its own plate. To do this, we are going to , once again, CMD+click our white spot layer. With our outline selected, open the channels palette and from the flyout menu select “New Spot Channel”. Selecting this creates a new channels layer that includes our white spot as a plate. This will be helpful when we start making our separations in the next step.

9.) Save your file.

10.) Let’s start creating our separations. Quickly clicking through our channels palette, we can see how our original artwork is being broken into 5 channels of color. Each channel contains a certain percentage of color to create the colors in the final artwork. Our goal is to break out each separation and convert it to a screen printable halftone.

11.) At the top, select Layer >Flatten Image

12.) Yikes! I know, I hate doing that too, but looking at our channels palette, you can see that all of our channels are still intact. Open the flyout menu on the channels palette and select Split Channels. This is going to close our flattened file and create 5 individual files of each color separation.

13.) Ok, so now we have our 5 plates. Why 5 you ask? Well because even though we are doing 4 color printing, we do have our white spot plate. If we are only printing to white shirts, we won’t need that plate, but it is easier to create that plate now, than realize a few days later that you want to go to colored fabric and you need to go back and create it. Each file open is named after the original file and has the color name appended to the filename.

14.) Now for the easy part. We are going to convert each of these files to a black and white halftone. From the menu bar, select Image>Mode>Bitmap.

15.) Now we are presented with the bitmap window. Since we are going to output our artwork at the same resolution as we created it, we will put 600 pixels/inch in the output box. For our screening method, we are going to use a halftone, so select Halftone Screen from the drop down box. Click OK

16.) Next we are presented with our halftone screen settings. If you read (Lesson 1), most of these options should suddenly make a lot of sense to you. The frequency is our LPI. In the article we discussed the means of figuring out your optimal LPI for your screen. For my screen with a mesh count of 220, I figured out I should use an LPI of 63. So in the frequency box, I put 63 lines/inch.

17.) In the (Lesson 1) I also discussed halftone angles and their importance for quality prints. Here are the angles I had recommended:

• cyan = 75°
• magenta = 15°
• yellow = 105°
• black = 45°

18.) Because we are creating our Cyan plate, I am going to put 75 into my angle box. For shape, we are going to go with the round halftone.

19.) Click Ok, and our plate is converted to a print ready halftone separation.

Repeat these steps with the other 3 separations and you will have print ready files ready for output to transparencies or film.

The final print:

Close-up of the final print:

Creating full color screen printed designs can be a rewarding (and profitable) experience. The key to success will be to experiment, and finding the right balance between detail and printability.

Download T-Shirt Templates

Project 1: Create 3 different T-Shirts designs with Photoshop

Subject: Your First & Last Name, and an icon/logo.

So, what is CMYK anyways?

By Wikipedia’s definition, “CMYK is a subtractive color model used in color printing”.

This whole CMYK thing is based on the mixing of specific pigments in particular percentages to create a wide range of colors. Often times referred to as 4 color process. These specific pigments are as follows:

• C=cyan
• M=magenta
• Y=yellow
• K=key (black)

Now, the reason this is considered a “subtractive color model” is because the higher percentage of cyan, magenta, and yellow I smear onto a white sheet of paper, the less amount of light that will reflect through, ultimately creating a black (in this case, smudge) on our paper.

Why is black referred to as the letter “K” in CMYK?  The K actually stands for Key, as in the key plate used by a printer. The key plate generally contains the artistic detail for a piece and was usually printed in black.

Color Seperations

Next we need to understand color separations. I had mentioned earlier how specific percentages of these particular pigments (cyan, magenta, yellow, and black), could be combined to create a wide range of colors.

Just for kicks, lets pop open Photoshop and take a quick look at the percentage breakdown of a color.

How about this grass green?

( in this example, green), we examined the percentages:

• Cyan = 75%
• Magenta = 5%
• Yellow = 100%
• Black = 0%

We understood that all together, these color percentages make it green, but when they are separate, they are just percentages of color by themselves. So, pulling these colors away from each other into individual instances, is the act of creating color separations. And with color separations, we can make screens!

How are we going to print a percentage of color through a screen?

Halftones. A halftone is the series of little dots you see when you look at a photograph in a newspaper. Halftones are dots of varying sizes and angles. The smaller the dot, the more white from the paper shows through effectively creating a lower percentage of color. The larger the dot, the higher the color percentage and the less white that shows through. When these dots are angled just right and printed over each other with their corresponding ink color, they appear to make whole colors.

Mesh Counts, Diameters & LPI’s

We have discussed how CMYK color separations require halftones in order to achieve the multitude of colors we want in a 4 color process image. There has been mention of dot sizes and angles that are necessary to achieve this effect properly.

Mesh Count and thread diameter. Mesh count is the number of threads, per inch, that makes up your screen. Professional screen printers generally utilizes a screen with a mesh count of about 255 threads per inch and above, but typically mesh counts can range anywhere from 110 to 305. There is also different thread diameters for screens. The higher your thread diameter in combination with your mesh count, the finer detail your artwork can contain, but also, the less ink that gets pushed through the screen. Inversely, the lower the thread diameter, the more ink that can be pushed through the screen, but the ability to maintain high details is lost.

So how do you go about choosing a mesh count? Well, for the sake of this article, and the process of 4 color printing on a screen, we want to go with the highest possible mesh count with the largest diameter of threads suitable for the material we are printing to. The higher our mesh count, the tighter our dots can be when we create our halftone.

In order to output a proper halftone, using the highest possible quality for our screen, we need to do some math.

First, we need to look at our mesh count, we can call that M. In order to figure out the optimal dot size of our halftone for our screen, we need to divide M by 3.5.

The quotient of this formula will become our LPI, or lines per inch.

M / 3.5 = LPI

Our LPI will dictate how many lines per inch we will have in our halftone. The higher our LPI, the more dots we can fit in per inch in our halftone, allowing us the ability to print a higher quality image.

The LPI of your halftone can have a huge impact on the quality of your print. Below is a quick break down of typical LPI standards for reference.

• Screen Printing 45-65 lpi
• Laser Printer (300dpi) 65 lpi
• Laser Printer (600dpi) 85-105 lpi
• Offset Press (newsprint paper) 85 lpi
• Offset Press (coated paper) 85-185 lpi

Let’s do a quick example of figuring out our LPI, and then we can move on to the awesomeness of angles. Let’s say I have a screen with a mesh count of 220 threads per inch. If I divide that 220 mesh count by 3.5, I get a quotient of roughly 63. Looking at our reference table, that will produce a lower quality halftone than used in newspapers, but fairly average for screen printing. While it might be ok for this example, I would probably look at buying a higher mesh count screen to improve my halftone frequency.

Also, as a side note, if you don’t have the screen yet, but now you want to achieve a halftone with an 85 lpi, you can always reverse the math to come up with the mesh count you should purchase. Always remember to round up if possible.

LPI * 3.5 = Mesh Count

Angles

The final key to producing accurate 4 color halftone separations for output is the screen angle. Not the silk screen, the halftone screen! The series of dots that create the halftone are referred to as a screen. It is this screen, that once overlapped with the other color screens creates the final image. Each separation screen is printed at its own angle to prevent what is commonly referred to as the moiré effect. Moiré produce a sort of distorted, dizzying effect, and can ruin a good print job. To prevent moiré patterns in your prints, a general rule of thumb is to offset each screen angle by 15 to 30 degrees.

Here is a sample of suitable screen angles:

• cyan = 75°
• magenta = 15°
• yellow = 105°
• black = 45°

With these angles in hand, and all the knowledge you gained earlier, you are ready to start outputting separations for creating your screens.