|GRAPHIC DESIGN | PRINT | WEB | ILLUSTRATION | PHOTO|
Q. Why do I need a responsive or mobile website?
A. According to Google, by 2014, mobile Internet use has surpassed desktop use.
Investing in a mobile ready website is not only smart, it is an invaluable step towards maintaining your audience engaged while giving them what they need and when they need it no matter which device they are using. Responsive Design = Smart Design!
This website, Triay Design is fully responsive. Below is a sample of another fully optimized and responsive website designed and built by Triay Design. To see this live site, please visit:
Note, image size has to do with file compression, not file dimensions. In other words, how how much is an image optimized during the saving process in a program such as Photoshop. (i.e. 100%, 90% 70% quality etc.)
The rule of thumb is to look at your website and see the area you wish to place your image in and estimate the size in pixels. (There are tools such as Snagit or Photoshop Elements, and Photoshop (full editing program) that can help you determine the exact size of the area in question.) Or you can use the images below to visually estimate size on any website.
Note: On websites never use inches or centimeters to measure things as they are not representative of pixel dimensions. Screen and image resolutions are measured in pixels, never in inches. Even thought stores advertise monitors and TV's in inches, the screen resolution is what matters.
For example a 1080p monitor or TV has a max resolution of 1920pixels by 1080pixels. This is considered an HD monitor. This does not mean that your monitor will only display that resolution since it could be set for a lower resolution by the user. The lower the resolution, the bigger the images will look and vice versa.
Similarly a 25" monitor will not show images that are 25" wide, the images again, are measured in pixels and are based on the monitors set resolution.
So a 25" 1080p monitor, or even 5" smart phone will both display full screen images at 1920pixels by 1080pixels. So the size does not matter, what counts is the screen resolution.
You can have two identical images that are both 400px by 200px but each be a different file size. This is due to the way each image was saved and the how much compression was used.
When saving an image as a JPG, most photo editing programs gives you the option to save a file with compression from quality ranging from 1 to 10. (10 being the highest quality — and also the largest file size). Photoshop actually gives you the option to save from 100% to 1% quality). On average qaulity 60% or 75% is ideal for websites as anything below 60% starts to make the image look not so great and somewhat blurry and pixelated.
The purpose of saving images at smaller file size is simply to save space but more importantly to make websites load faster as the less stuff the website needs to load the quicker the webpage will be displayed.
Enlarging a 72dpi image at say 2” wide, (equivalent to 144pixles wide), will result in a pixelated and blurry image. You may be able to print the same 72dpi image and it may look okay (not great, just okay) so long as you print it at only 2” wide or whatever its actual size and resolution may be. There are simply not enough pixels on a typical 72dpi web image to print or much less enlarge it.
The quickest way at a glance, to see if your JPG image will print ok at larger size is to see the file size. Example:
MyImage One.jpg >> File Size on your computer: 34kb (kilobytes)
MyImage Two.jpg >> File Size on your computer: 2.5MB (megabytes)
Any image that is under 1MB (1 MB = 1000 kb) and especially under 500kb will most likely be for web purposes only and will be too small and low resolution for print. So Image Two at 2.5mb will be the one to use for print.
For best print quality ideally you will need an image that is at least 300dpi resolution at actual print size or at 100% of the size you want to print it. For example, to print a 4"x6" photo, you will need an image that is 4" x 6" at 300dpi. This translates to a 1800px by 1200px image at 300dpi.
Bellow is an example of a portion of an image enlarged to 400%.
Yes you may use an image you found online but only if that image is not copyright protected. Unfortunately it is often hard to tell if an image has any type of protection or copyright licence. The best way to find out is to ask the owner of the website where you found the image and ask for permission to use that image. Other times, the images have a clear © Copyright or ® trade marks either on the image itself or on some disclaimer text next to the images or at the footer of their website.
To be safe, it is always a good idea to use your own images or to purchase stock images from a reputable source online. The best choice for stock images are images that come with a Royalty Free license agreement as opposed to a Rights Managed license agreement.
RGB Ideal use: Wesbites or documents for computer screen use only.
CMYK color profile (Cyan, Magenta, Yellow & Black) is reserved for images that will be used for print. You can however print RGB images but the color reproduction will not be as accurate. Just about all home, office and professional printers use CMYK inks or toners to produce highly rich and more vibrant colors.
The only downside to working with CMYK images on a computer monitor is that the final printed material will most likely look slightly different due to the fact that monitors display all images in RGB even if the image has a CMYK color profile. For this reason it is usually worth while printing a “proof” before mass printing and then adjusting or colour correcting the original image to match the preferred outcome.
Notice the slight colour difference. The CMYK image looks a bit dull and less saturated but this is only the appearance on a computer monitor or TV which all displays colours in RGB. When the image is printed using CMYK inks, the full colour and richness of the image will come out looking just fine.
Another thing to keep in mind is monitor color differences when proofing artwork for print or web.
Different Monitor, different color:
Why don't all monitors look the same?
Colour will always vary from monitor to monitor, even if they are the same brand and model. Technology is good these days but not perfect. For this reason, when monitor manufactures make monitors, they can't always make them look identical due to various technical limitations. For the most part, today's monitors are fairly accurate when it comes to color reproduction, however when looking at the same images on different monitors side by side, like the picture bellow, you will see that the image looks different and in some cases considerably different. This is important to know when working with graphic designer and while reviewing or approving artwork.
Most reputable graphic designer will make an effort to color calibrate their monitors for the most accurate color reproduction, but unfortunately other non-graphic artists will mots likely not even know that they can calibrate their monitors. Furthermore, there is the problem of different colors for different monitors as previously mentioned. There is also the issue of RGB color vs. CMYK. So what looks good on screen to a graphic designer may not look so great to the client who is using a non-color calibrated or older monitor with poor color reproduction and/or brightens & contrast issues.
One quick suggestion I give to my clients is to look at screen samples such as JPG files on different monitors if possible. For example: view the samples on a laptop, tablet, a different computer or even on their cell phone. This way you can get a better idea of they average color intended by a graphic designer. But the best way to print the exact color you want (if not for website projects), is to print a proof and then do some minor color corrections to the artwork. This is a costlier alternative that is ideal for expensive project or for color-critical projects, but ultimately it is the only way to get the correct or desired colors for yuor print projects. For websites, you most likely just have to compromise as there is nothing that can be done to make your monitor look better, other than to buy a new one...
When looking at images that are intended to be printed, this is the main reason why most print shops will warn customers of colors not matching that of the printing press and will often state in their service disclaimers that "colors may be different and variations of the on-screen and printed piece will differ slightly ".
Note: there are professional tools & software available that will help professional designers calibrate a monitor to ensure the best color reproduction from an RGB display to print. It is not a perfect solution but it helps. Doing print proofs is always the best way to go unless you have experience with printing and color profiles.
Q. I don't have Photoshop, how can I edit my pictures?
A. There are many free and inexpensive programs out there for basic photo editing and even complex image manipulation. Here are two links to some of the best and free tools you can find online:
1. Photoshop Express Editor: http://www.photoshop.com/tools
2. GIMP: http://www.gimp.org
Click here to download a 6 page PDF pantone color swatch to help you find the colors you like.
The downloadable PDF is a reproduction in RGB color, so what you see on your monitor is only a close approximation of what the final color will look like printed. For web related purposes, it is okay to use this PDF guide as a reference.
For actual printed projects, the correct way to get an accurate sample of what the final CMYK printed color will look like, you must see an actual Pantone Color book in person. Most printers have such a books and often you can ask them to show you one. Please contact me if you would like for me to show you an actual Pantone Book during our next meeting so that you may choose the exact color you like or if you have any other related questions.