Monday 12 May 2014

Obsessed with Web - web design blog inspiration

Happy Monday everyone!

I want to share with you all today a fantastic blog my friend has created. 



Her blog is titled "Obsessed with Web". The blog is related to web design and provides information to do with colour, design, graphic design, typeface information, web design, visual cues and more!

The blog is fantastic and can help you further your knowledge about all things to do with the web and provides information and advice about design. Check out her interesting and eye-catching infographics today!

The link to her blog is: http://obsessedwithweb.blogspot.com.au 

Thursday 8 May 2014

Understanding Resolution



Understanding resolution is one of the most important aspects of Graphic Design (and any other area which requires image use). It is important to understand resolution and know which resolution to use in different situations. Read the post below to understand more about image resolution.

The term ppi means pixels per inch is a way of expressing the resolution of a screen and “density of pixels” in an image. Most computer screens have a resolution of 72ppi which means that if an image is created for the web then there is no reason for the ppi to be larger than 72ppi. According to research, all images made for web should be 72ppi.

The term dpi is in relation to printed images meaning “dots per inch” and is the printing equivalent of ppi. For printing purposes, all images should be printed at the resolution of 300dpi. 

Images that are displayed in a digital format are measured in pixels. These pixels are so small and closely packed together that when the image is zoomed out and viewed digitally, the pixels are not noticeable. 

To give an idea of how an image is placed in relation to size against a 1300px width by 800px computer screen, a 300px width by 400px image would only cover a small amount the a computer screen. 




Printed images are formed by small dots on the page that the viewer is unable to see once the image has been printed if the resolution of 300dpi has been used.

How to change an image resolution



The image resolution can be changed on Adobe Photoshop by selecting Image + Image Size and find the box which states resolution. Here you will be able to change the resolution to any resolution needed. Either 300dpi for printing purposes or 72 ppi for web use. The images displayed at the beginning of this post has been set to 72 ppi. 



Before you add images to your next design it is important to know how your end product will be displayed. Either printed or digitally. Once you are aware of this you will be able to alter the resolution of each image accordingly.


FURTHER INFORMATION

Once you have changed the resolution of an image it will show you what size the image can be to remain clear with the resolution selected. 
For example; the image below has been changes to 300dpi for printing purposes. This means that the width of the image is 4.23 and the height is 6.35. This means that once the image is set to a resolution of 300dpi, the size of the image cannot exceed 4.23cm by 6.35cm otherwise the image will not remain clear when printed. Once this image is added in to Adobe InDesign or any other program you wish to use for your project, the image must stay this size otherwise it will not be clear when it comes to printing. 



TIPS and TRICKS

A good trick to keep the size of the image once the resolution has been changed when working in Adobe InDesign is;


  • When you want to add an image into your project when working in Adobe InDesign, click cmd + D   OR   control + D. Now you can select your image
  • Once you have selected your image and opened it in the program your image will hover with your cursor. 
  • Instead of dragging the image to the size you want. Simply CLICK and your image will appear at the correct size for the image with the resolution that you have used.


All information retrieved from:
Planet of Tunes. (2014). dpi, ppi & screen resolution. Retrieved from Planet of Tunes web site: http://www.planetoftunes.com/computer/dpi-ppi-screen-resolution.html#.U2tkOF55UpE 


Barker, J. (2013). Image Resolution Explained. Retrieved from Free Digital Photos web site: http://www.freedigitalphotos.net/blog/tutorials/image-resolution-explained/