Cyan of the Times

by Yours Truly for Beacon Technologies

With the development of user-friendly Content Management Systems, we now see many people using these tools to edit their own websites. Often times, this includes adding images to your page, and almost always you will want to work within a certain image size constraint so that the images will fit better into the layout of your site. Here are some simple guidelines to follow to ensure that your images are appropriate for the web and a easy tutorial on how to crop images to a specific size using Photoshop.

Have an image you want to use on the web? Check it’s size. If you are trying to use an image for a header banner graphic that spans the entire width (or close to it) of the website you will probably need more than 500 pixels. In Photoshop the easiest way to do this is to go to Image > Image Size and check there. No matter what the resolution is set at in this box, the number of pixels in an image stays the same (unless you modify the size while in this box). For web, 72 pixels/inch is always used but even if your image is currently set at a resolution of 300 pixels/inch the Width and Height under Pixel Dimensions will stay the same so you can at least know this and see if you have enough pixels in your image for the spot on your website you want to use the image for.

The absolute easiest way to crop an image and get it pixel perfect height and width is to use the crop tool in Photoshop. With your image open, select the crop tool from the tool panel (of you can use Ctrl+C on your keyboard). Once the tool is selected you will notice you have Crop Tool specific settings in the top bar. This is where the magic happens. If you know you have to create and image that is exactly 200 pixels by 300 pixels you can enter this in the bar. Just use “px” after your size to denote that you want to crop to pixels (as opposed to inches or centimeters) and make sure that your resolution is set to 72 pixels/inch (also called dpi). 72 dpi is the image resolution that is always used for the web because this is the standard resolution for computer screens.

Once you have the appropriate values entered in, all you have to do is click and drag your crop tool over your image to select the portion of the image you would like to crop and resize, then just double-click to finalize. One thing to keep in mind is watch the clarity of your image. If after make your cropping and the image seems to “pixelate” (it will zoom in a bit and get fuzzy) this means that your image was smaller than the size you chose to crop to and you have lost image quality. You may want to crop differently if possible, or use another image.

Once you are content with your selection the best way to save an image is to go to File > Save for Web and Devices. A box will pop up that will allow you to select what file format you want to use and how much you want it to compress the image (this will make the file size smaller to allow for quicker loading times). My go-to is usually a .JPG with a image quality of about 70. This will make the image a bit smaller without sacrificing quality. For larger images you may want to go a bit lower, but keep an eye on the image quality. If my image is already a bit low-quality I will save it with a quality of 100. I only use .PNG if parts of my image are transparent and .GIF is used for flat color graphics that need to be a small file size. Using .GIF for many images will mean a large sacrifice in quality. The preview window will show you exactly what your image will look like when it is output. This will help you double check image size and file size in advance, so take advantage of it. It’s better to consider things now rather than put your image up on your site only to notice then that it is the wrong size or has an issue with the image quality.

Hopefully this guide will give you a few tips or help you understand the tools a bit better if you are trying to prepare images for your site or even just check the sizing of images for you pass them on to someone else to use for a specific purpose.

by Yours Truly for Beacon Blog

“Nothing to Excess” -carved into the front of the temple at Delphi.

Without getting too geeky, the golden mean or golden ratio is simply a mathematical formula that dictates proportions that are found throughout the natural world and believed to be the foundation of what we find to be aesthetically pleasing. Many artists, sculptors and architects since before the Renaissance have proportioned their works to approximate the golden ratio. From the leaf of a fern spiral and its relationship to the other leaves on that same curved stem, to the arms of a spiral galaxy, these proportions can be found everywhere.

Thinking Out of the Box

In web design we are often limited by the use of boxes or box shaped areas that become containers for information, but that does not mean that the placement and proportions of these boxes can not utilize the mathematics that so greatly influence the harmony and balance of organic shapes. The functional structure of data is the king of everything in web design, but all of the header, sidebar, footer and main content areas can be laid out in a way the embraces the golden mean and detailed with graphics that have some semblance of the visually captivating, organic detailing of the natural world.

Symmetry Can be Boring

There is a time a place for symmetrical design. Sometimes it is the best way to wrangle in unruly content (an even number of columns in uniform widths, for example), but often times it is not the most visually interesting solution. A layout that is close to symmetrical (in that is doesn’t have a huge chunk of content on one side and then a slim cramped sidebar but instead maintains proportions closer to the golden ratio) will channel content in a way the provides a visual hierarchy. It is important that is not too out of balance yet is also not purely symmetrical.

Finding a Happy Medium

Creating captivating visuals doesn’t have to mean sacrificing functionality, and a data heavy site with a great deal of functionally does not necessarily have to be visually boring in order to be usable. With proper planning, a happy medium can be established that communicates information with a efficient hierarchy that allows the user to effectively engage with the content. You do not want overwhelmed users having to struggle to sort information on their own, but at the same time you do not want to bore them or not provide enough information. Nothing to excess; everything in moderation.

If you are looking for a design resource that helps you implement the golden mean into layouts check out the ever-famous 960 grid system – complete with Photoshop plugins.