Points, Pixels, and Picas....oh my!
-
Help! I have been trying to learn how to size and re-size artwork and am struggling! Does anyone have a great resource where they learned how to save artwork so it will be both high quality printable later on, and re-save to look great on a screen now?
I am specifically wondering for comics, but I think it applies to everywhere. What are the principles to understanding pixels, dpi, points, inches, and other saving options? Is there a thread or book or maybe someone here can explain?
-
Hey Julie, I work during the day as a graphic designer so I deal with the technical side of file sizes and formats a lot. I like to start with print resolution because that is almost always going to need to be a larger file than your images for the web. When you begin your artwork ask yourself
"Realistically, What is the largest I will want to print this image?"
For book illustrations maybe that's 8x10, if you want to make prints maybe its 16x20 or 18x24. You need to make sure that your art board is set up at a high enough resolution at your desired maximum size that the image will print clearly. So what resolution is high enough resolution? It depends on the printer. Some high-tech photo printers can print 600-800 dpi (dots per inch is the printer equivalent of pixles/inch although not a 1-to-1 translation because every printer's dot size can differ) or higher, Adobe's website says "To print a high quality photo on an inkjet printer, an image resolution of at least 220 pixels/inch should provide good results."
For most common print applications, you get very good results with 300 pixels/inch. I like to set my art boards up at 400-500 pixles/inch, that way if I want to crop in on my image once I'm done or enlarge a part of my art a little, there is still enough information to get a sharp print. When I save out a jpg or PDF to send to a client or printer, I export it at 300pixles/inch. In programs like photoshop you can tell it what size in inches you want the document to be and the resolution you want and it will do the math for you. If you do not have a program like that, you can do the math yourself:
I want my document to have a resolution of 300dpi/ppi and be 5 x 10 inches
5 x 300 = 1500
10 x 300 = 3000
my document needs to be 1500px x 3000pxScreens get pretty complicated, I really like this site's explanation: https://www.sebastien-gabriel.com/designers-guide-to-dpi/
Also, if you are anting to optimize your image sizes for social media platforms, Sprout Social has a great resource breaking down what size you need to export at: https://sproutsocial.com/insights/social-media-image-sizes-guide/Taylor Woolley
(Formerly Taylor Ackerman / StudioLooong)
Website: www.woolleystories.com
Instagram: https://www.instagram.com/woolleystories/ -
@juliepeelart Is this traditional media that you are digitizing or art created digitally?
-
@Amber-Lynn-Benton I have done both and have questions with both.
-
@juliepeelart Well, let's separate the two. Which are you doing more often digital/traditional and are you photographing or scanning your traditional media?
-
If I just say "following" and lurk in this conversation, is that okay.....this is a problem I have so many questions on as to not really even know where to begin asking questions.....thank you @StudioLooong for your explanation. And thanks to anyone who also shares expertise on this topic....
-
@StudioLooong Thank you for you for your explanation of how to set it up! I will definitely check out those resources. THANK YOU! One more question, Is there a specific file type that you like to save it as in order to preserve the quality? How do you save it to post on the web? See my question below!
-
@Amber-Lynn-Benton Thank you for your willingness to help! Here is one scenario where I have had problems.
My first step is to draw and image on paper with ink,
Then I import it into photoshop in order to color. (Sometimes it is already pixelated here, but that may be a different question.)
Then I color and finish it in Photoshop and from there I need to do four different things.- Post it in places like Pinterest, or on a website so it can be shared and look nice
- Email it to my list
- Have a file that I could send to a printer to print on paper (high quality)
- Have a file that I could use to put on products. (scaleable?)
I feel like I spend a lot of time spinning my wheels and my stuff can look grainy, or blurry on Pinterest and product files often need something that can expand.
I have used SVG and PDF to successfully scale on sites like Vista Print but these are usually simple graphic designs created in Illustrator.
Amazon Merch wants PNG
Etsy has pixel requirements
My website should look good, but not be slow to load,
same with SVS, they want files to be small enough....
I know that the order I save things in can change the result as well, because some file types delete info. So, maybe what I need is an order to follow so I don't end up saving the wrong thing?
This is what is spinning around in my head. There must be an easier way, or best practices and principles or pot-holes to avoid.I guess I feel a little overwhelmed!
Thanks for you help! -
@StudioLooong excellent info
-
@StudioLooong I read through your answer again. Thank you so much! This is a lot to take in. You used the word "export" is there a difference between saving and exporting?
-
@juliepeelart Let's first talk about image creation resolution before we address saving at different resolutions/sizes. Are you importing sketches that you are only drawing over and the bulk of the details are digital or are you importing traditional media illustrations with lots of details that you want to touch up, or adjust, or work on top of digitally leaving much of the traditional work visible?
***(Sorry I read your response again and realize that you are using your linework as a part of your finished illustration. In this case I would scan it in at a higher resolution as described below (maybe not 1200 but no less than 300 if you are drawing it at exact dimensions).
GOING LOW RES to HIGH RES
If you are just bringing in sketches there are some ways to create images at a lower resolution which make the work faster and take up less processing in the beginning of the illustration and then increasing the resolution towards the end of the illustration before adding final touches. This can also be done with digital sketches. That technique is nicely demonstrated in an SVS class by Jim Madsen.If you need detailed traditional media scans collaged into or used as a base for digital illustration then it requires a different approach. I haven't watched the SVS Mixed Media class yet but that also probably has some useful tips.
Scanning and Archiving Original Artwork
Myself, I often scan my work at 1200dpi because I currently work quite small - if my artwork was 16 x 20 for instance I probably wouldn't save such a high resolution file. When I scan my traditional artwork I make my color adjustments and then save as a .tiff file. This is a stable long term non decaying file. It's a good way to archive images and I learned this technique from fine artist friends. But they are large and make PS files needlessly unwieldy if you try to work directly on top of them for a digital illustration.WORKING AT ACTUAL RESOLUTION
Instead I create a new file with the desired print dimensions and depending on the printing process (usually 300 dpi but sometimes 600 dpi). Then I bring the scanned artwork into this file but I always have access to the original higher resolution artwork if I ever need it. (And this recently happened to me - my Willow Friend Portraits were painted very small and I collaged them into an 8x10 print. A designer asked for each of the portraits separately as a larger print and because I had scanned at 1200 dpi I was quickly able to set up those files without rescanning and doing new color adjustments.) This may be different for you if you only have line work but I would create a document at the largest size/resolution you think you might need.This second technique also works if you are working with sketches or scanned rough compositions and completing the illustration digitally but I don't think it's necessary to use such high dpi originals. If you are working with just a photograph of a sketch from your phone and pull it into a higher resolution document that can sometimes make your sketch pixelated especially if you don't use the 'actual size' file. I'm not sure if this is what you are describing. If so try a scan rather than a photo or use the photo at actual size.
If you find that your computer gets bogged down with your images, or you want to work more quickly, or that brushes feel to small then the first method demoed by Masden might be a better fit.
I'll respond to exporting other formats in a separate post.
-
@juliepeelart I also use Illustrator and I know that in AI there is a big difference between export/save as. I'm not sure if there are as big of a difference between those two in PS but here is my PS workflow:
Archive Original and Create Templates for Commonly Used Sizes
Once my illustration is finished I save a copy of my illustration as a .tiff file just like my original scans for archival purposes. You could also save a copy as a .jpg if you prefer that format. When saving as a copy discard the layers for a smaller file size. This is the image I save not the image I print or share online. When I set up my print files I create a template for each print size complete with margin guides, exact dpi, etc. I just have to set it up once and then for each new illustration I import the artwork and then use the 'save as' command to save it with it's unique name. So I might have WillowFriends_8x10.jpg and WillowFriends_5x7.jpg. My template names are 8x10.jpg and 5x7.jpg respectively so I just place the artwork title in front of the template name before saving. Then when I need to make new prints it just an open and go scenario. Templates have become my friends ;).If I were trying to export all of the formats that you mention then I would create a template for each of them. One for etsy, one for your website, one for Pinterest, one for Society6mugs, etc.
Change Image Size without Template
If for places like your website or Pinterest where you don't need to add white space around the edges to change the propotions/dimensions of your work you can simply change the resolution of your artwork using the Image Resize option. Just be sure to click the 'resample' box and you can adjust the actual dimensions or you can adjust the dpi. The important part here is to again use the 'Save As' command so that you don't overwrite the original image.What Resolution Do I Need?
There are many sources to find out the best resolution for posting on places like Instagram using Google - and I've noted the site shared by @StudioLooong, too. I was told by an art agent recently when I embed images into an email to use 100 dpi images as a low resolution as opposed to a 72dpi.I'm sure other people might have a different answer to your question - and I am always looking for tips to improve my workflow - but this is the way I'm currently working. And honestly I'm still deciding what resolution I want to post on my website - I have both some too high of a resolution that I need to remove and some too low of a resolution that also need to be replaced. For me it's a fine balance between protecting my work and showing it off.
Would love to hear other people's answers to this question, too.
-
@juliepeelart In regards to web optimized images if it helps I recently bookmarked this page on SquareSpace:
https://support.squarespace.com/hc/en-us/articles/206542517
I have quite a bit more work to upload to my site but stopped because I was not happy with the either size images I tried. I'm digging into this page this week and then redoing my images.
-
@juliepeelart same thing. I was just saying export because if you are saving a jpg or pdf out of photoshop they call it exporting.
I think photoshop calls it "export" when you are saving the image out in a form that is no longer going to retain all of the image data of the original (layers get compressed and images get downsampled). The file formats in their "save" menu retain all of that data so when you open them up again you can continue editing.
-
@juliepeelart when you are saving out all these images, work big to small. First things first, you need to adjust your scanner settings or invest in a scanner that can scan your work in at 600-1200dpi. If you are scanning in at 300dpi and try to enlarge or crop or edit anything it is going to start to get soft. You also need to make sure that your original artwork is large enough to accommodate the size of your digital artboard. If you draw something on a 5x7 sheet of paper, scan it in, and drop it into a 8x10 artboard it is going to degrade in quality.
For my process, I start with an original that is the same size that I am going to set up my digital artboard. I like to scan in my pencil work and color digitally. I scan in my work at 600dpi.
First save the original working file. Full resolution, rgb colorspace, whatever file format is native to your software (so for me in photoshop - .psd). Never save over this. If you are ever asked for a specific size or file format, open the original and work from that, do not try to re-open and re-size an old export.
Next is saving for print. If you save out a 300dpi pdf and a 300dpi jpg at the same size as your original artwork (cmyk colorspace for both) those will print well. If you encounter someone who wants a print-res png or tiff and you have lost the original working file, you should be able to re-open your print-resolution pdf or jpg and save it out as a png or tiff at the same resolution without loss of quality.
For your personal website and emails, you have to decide how big you want the images. If you are using a website template or email template, read the documentation that came with the template. It should tell you the exact pixel dimensions to make your images. If it doesn't email the template creator and ask. If they tell you that the images are set up to display at 800x600, you either need to save out an 800x600px jpg or png at 144 - 244ppi or save out a 1600x1200px image at 72dpi this image should be in RGB colorspace (this takes into account retina screens, see the link I posted earlier on screen sizes). If you are worried about file size, you can run your images through a site like https://tinypng.com/ . It does a great job of reducing file size without degrading the quality of an image.
For any social media site, you need to do your research and find out what pixel dimensions and resolution their site prefers. If you upload in image that is too large or too high resolution to pinterest, instagram, or facebook, they WILL compress it for you and it WILL look terrible. This does mean that you usually end up needing to save out a new jpg for each application but it's worth it if you don't want a social media site to decide how to compress your images.
-
@Amber-Lynn-Benton @StudioLooong THANK YOU! These are such great responses. I am printing them off for reference.
I didn't realize that posting something too big can actually make it look worse because info will be dropped for me. Saving an untouchable master copy is a genius idea. There are so many hints in here. Thinking printing size first is a great way to go about it. I think my stuff has been waaaay to small. You spent a lot of time typing this out. You are both my heros! Thank you!! -
Such great information. This is my way to follow and lurk without being too creepy.
