George Triay Design
 
604.290.3246
 
» Contact Me
Contact_Icons
HOME ABOUTPORTFOLIO TESTIMONIALSCONTACTCLIENT RESOURCES  

 

 

CLIENT RESOURCES & FAQ

Mobile website: What are they and why do I need one?

When I purchase a stock image, how do I know which size or resolution to get for my website?

For images what is the difference between file size and file dimension?

Why do my images sometimes looks blurry?

What about images for print? Can I use the same stock image I used on my website for print?

Stock Images: Can I use an image I saw on another website or in Google for my own website or brochures?

What is the difference between RGB and CMYK color?

Different Monitor, different color...

I don't have Photoshop, how can I edit my pictures?

Download a Pantone Colour Swatch + Why do I need Pantone colours?

Additional Resources & Support Files ««


 


RESPONSIVE DESING:


Q. What are mobile or responsive website and what is the difference?

A. In an nut shell, a mobile or responsive website is a website that has been optimize to allow for text and images to flow and comfortably fit on any device's screen no matter the size or resolution. Unlike older mobile only websites which depend on device detection with media queries, and then re-direction you to a mobile only website, responsive websites are a combination of both mobile and desktop. In essence you have only one website to manage that behaves differently and adapts to the the device being used to view it.

 

The main advantage of having a responsive website is that you only need to maintain, edit and manage only one site. Another huge advantage is that responsive websites do not depend on a specific device model such as a iPhone 4 vs and iPhone 5 or 6 Plus or Samsung Galaxy or Blackberry etc. which have different screen sizes and different resolutions. One site for every device!

To view a few web samples please ckick here: Website portfolio

  Responsive Website Sample  

 

Q. Why do I need a responsive or mobile website?

A. According to Google, by 2014, mobile Internet use has surpassed desktop use.

  GLOBAL INTERNET USERS  


There is no question that your audience is already looking for information on your website via their smart phone or tablet. A frightening statistic is that if a person cannot easily see or read your website, they will simply move on to the next site in a matter of seconds. Additionally, desktop-only optimized website often load much slower and require a lot of pinching and zooming just to navigate around your website therefore adding to the problem.

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!


Why Responsive Design is so important
and why you need it today. (Watch now)


(Video courtesy of: WhoIsHostingThis.com )
WhoIsHostingThis.com is a webmaster tool that lets you discover which web host any site is hosted with. Read more...

You may also visit this to read more on: "Why You Need Responsive Design on Your Website"

 

  Responsive Website Sample  


The image above illustrates the difference between a mobile site and one that has not been optimized. As you can see, on the non optimized sample, most of the text and images do not fit within the screen.

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:
www.dundaravepreschool.com and another few example are www.gl-compliance.com and http://burquitlamphysio.com


  Responsive web design  

 


IMAGES:


Q. When I purchase a stock image, how do I know which size or resolution to get for my website?

A.
Most stock image re-sellers will often sell images based on several sizes such as Small, Medium or Large and will usually show file dimensions and file size for each category:

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.

 


Q. Why do my images some times looks blurry?

A.
It is always better to reduce an image's dimensions, but NEVER to enlarge it as it will make for a blurry or pixelated image, so always buy images that will be large enough to work with and keep in mind that you may have a future use for the same image so try to be flexible while staying within budget.

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.

 

Bellow are some example of some images with the actual pixel size (dimensions) next to them:

 

  200 x 150 px

  380 x 285 px

  550 x 413 px

 

 


Q. For images what is the difference between file size and file dimension?

A.
File size is based on the actual amount of space a file will use up on your computer's hard drive or storage device, while the file dimensions determine the file's width and height (measured in pixels)

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.
In Photoshop and most other image editing programs, you have the ability to save a file with different compression settings. The level of compression determines how much data (or quality) is saved.

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.


Below are examples of the same image, both the same dimensions but different file size:
(Saved with different compression levels)

duck1
500px by 360px
Quality 100% - 179kb size
duck1
500px by 360px
Quality 10% - 9.7kb size
(Notice the pixelation)

 

 


Q. What about images for print? Can I use the same stock image I used on my website for print?

A.
The answer is NO, you cannot use that same image unless you plan to print it very small due to the low pixel size.

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.


* Here is a quick tip:

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%.

72 dpi image at 100%   Enlarged area to around 400%. The actual pixels are now visible.
 

 

 


Q. Stock Images: Can I use and image I saw on another website or in Google for my own website or brochures?

A. YES and NO.

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.

In a nutshell, Royalty Free images are purchased only once and may be used as many times as you like in as many places as you like. Where as Rights Managed images can only be purchased for one purpose only and with a limited number of print runs or website usage. Rights Managed images are typically drastically more expensive due to their exclusivity and terms of use.


Here is a place I like to use for the majority of my Stock Image needs: http://depositphotos.com. Good prices and great variety.

Bellow is a list of other great stock image website. Each site has different price structures, monthly plans, subscription plans and or single credits plans to choose from. Always read their terms of use and of course look at their prices per credits and how much one image cost in credits or dollars.

https://pixabay.com
http://www.canstockphoto.com
http://www.alamy.com
http://www.bigstockphoto.com
http://www.fotosearch.com

 


RGB vs. CMYK Color:


Q. What is the difference between RGB and CMYK color?

A. Old style TV's, Plasma TVs and LCD monitors (flat panel displays) use RGB color profiles (Red, Green & Blue). They produce all other visible colours by quickly alternating, or mixing all 3 colors.

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.

RGB vs CMYK  

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.

 

 


FREE IMAGE EDITORS:

 

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

Description: FREE Online editor for JPG images up to 16MG in size. Does not require a download as it works online inside a bower window.

Pantone Colors

 

 

2. GIMP: http://www.gimp.org
Another great and freeware desktop software for editing most image file types with Photoshop-like quality or features.

Description: FREEWARE, requires free download to install.

Pantone Colors

 

 

 

 


Pantone Color Swatches:


Downloadable PDF swatches...

 

Pantone Colors
Pantone color Swatch books

 

Click here to download a 6 page PDF pantone color swatch to help you find the colors you like.

pantone swatch  

 


Q. Why do I need Pantone Colours?

A. In in 1963 Lawrence Herbert created the standardized colors Pantone for the purpose of accurately matching colors that will be used primarily for print purposes. Pantone colors are formula based pre-defined colors used by hundreds of designers and printers.

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.

 

 

UpTop