Session 1:
• Critique of color files.
Assignment: a) Final refined sketches of icon in bxw and color. b) Print color files as per template; upload digital version.
• How to make sketches into Icons:
a) Go to ICONVERT
https://icoconvert.com
Before getting there, you must convert your Ai images into .jpgs or .pngs. The decision rests on how many colors your icons have. Both are compressed files.
Required sizes: 4 x 4 px, 64 x 64 px, 88 x 88 px
Look at all the versions and make the adjustments to the original so it reads in all sizes.
You may have to simplify it:
• Thicker strokes
• Outline other strokes, or outline shapes with a 1-point stroke to delineate them
• Adjust the colors so they stand out.
Once you’re happy with how they look, put them into the presentation template, attached.
Make sure your name is included
b) To finish the project, there are two items due, the Printed Version, and the Screen Version
Icons for Print and Screen on the template
OK, so you’ve made the icons in all the different sizes. Now it’s time to turn your attention for the same images in a presentation for both screen and print.
Remember that I told you to work in RGB at 300 dpi? First, you’re going to use the print templates and import your three finished icons and process them for print. Then, you can reprocess the files for screen.
Notice that there are templates for both Print and Screen. I made them for you in the proper resolution. Make sure you put the proper image in the proper template. That’s where the naming convention comes in.
- Print:See the InD template attached.1. Download the template for PRINT.
2. Command-D calls up the PLACE command. Find your icon image in the correct resolution. Hit COMMAND+OPTION+SHIFT E and it will fit in the box. Do the same for the other sizes, making sure to delete the black rule I made in the template for your images. Once done, go to the next step.
3. In InD, go to PDF Presets. Choose PDF (x1-A). Click through and look at the PDF after processing. The PDF (x1-A) is a format especially for print, and when you process your files using this format, everything prints great. There are other PDF formats for print as well, but this is the most dependable one.
Name your print icon uploads as follows:
pCOMD1200_Fa19_Icon_XXXX.pdf
where the four Xs are the first four letters of your last name.
Note, some icons will be free standing; others will have a field with square or rounded corners. This is all part of your design.
Looking at each of the three sheets, choose the strongest one and start to add color with your colored pencils. If necessary, transfer and trace the image, or scan and repeat.
The Templates:
The .IDML and the .PDF are for reference. After you’ve processed your three print icons, make one PDF containing all three and upload to Bb. remember the resolution is 300 DPI; make a PDFx1-a
- Now for Screen.
Use the web templates I made for you. Place the images into the little boxes, like above.
Again, from InD, go to PDF Presets. This time, choose SMALLEST FILE SIZE. Place the images into the little boxes, and process the files. Upload them in the proper portal with the naming convention below:
wCOMD1200_Fa19_Icon_XXXX.pdf
You will see two portals. One for print, one for screen. Upload the correct one in each. We will be printing them coming up.
See the InD Templates, attached.
Put all three files in one PDF and upload to Bb. Watch the resolution, it’s 72 dpi.
For each of the three icons we selected together, work on them, developing the color variations in Illustrator. Consider stroke weight, and when it comes to the color, remember that the icon will project. If it’s too dark, your image will disappear once it’s small.
When adding color, beware of color that’s too bright. The idea is to gave color that stands our but isn’t stabbing. The easiest trick in the book is to add 10% of the color’s complement to make it deeper, richer. For example: if you have a field of Magenta, even if you love the color, you’ll find that it might be a bit weak, lacking depth. If that’s the case, add blue. Yes, blue, by 10%. See attached.
You might think that the resulting colors are dull compared to the pure CMY and RGB. But, if you look at them by themselves, they’re still quite bright.
Work in high quality RGB = 300 dpi. Eventually you’ll make CMYK 300 dpi and RGB 72 dpi.
The execution must be exact. Note that I corrected the rule on my final one when it didn’t process correctly.
