Simplx Blog

Graphics are a major part of every successful website, especially retail sites like yours. Unfortunately, graphics are also tricky, and one the easiest things to get wrong. Today I’m going to talk about one of the biggest make-or-break concepts in using graphics: Resolution.

Don?t panic! Resolution sounds like a big, scary word, but it really isn?t. All resolution really means (at least when you?re talking about computers) is how many little colored squares a picture is made out of. The colored squares on a computer screen are called ?pixels.? See the five blue pictures below this paragraph? They each show the same letter ?R? made from different numbers of pixels. The numbers above each picture tell you how many pixels it?s made from. See the difference?

Resizing

Most of the time, the pictures you?re trying to work with don?t start out exactly the size you want them to be on the webpage. This is where resizing comes in, and where resolution can mess you up if you don?t know how it works. If you want the same picture, with all the same stuff in it, but you want it to be a different size you need to either ?blow it up? (make it bigger on the page) or ?shrink it down? (make it smaller on the page).

Here?s the problem though: computers are not good at blowing images up. Shrinking a picture down is easy for a computer to get right: it just throws away a certain number of pixels and presto! It?s got a new, smaller, picture. But when you tell the computer to blow a picture up, you?re making it guess where to stick in new pixels and what color they should be. You end up with something that looks blurry and unprofessional because of that guessing.

So, how do you blow a picture up without making it look crummy? The short answer is: you don?t. You can blow a picture up a little bit without much trouble, but most of the time you?re just better off getting a new, higher-resolution picture that?s bigger than you need and shrinking it down. This makes a good argument for always getting the highest resolution images you can and always keeping a copy every image saved at the highest resolution you have.

Proportion

The other trick to resizing is paying attention to proportion. Proportion is another big word that isn?t really as scary as it sounds. It just means how long one edge of the picture is compared to the other. Look back at the top of the page and check out the ?R? in the right-most box. The top and bottom edges are the same length as the left and right ones. But what would happen if we reduced the top and bottom edges by half, but left the side edges the same?

Doesn’?t look right does it? We haven?t maintained the picture?s proportion as we changed its size. The really scary part is what happens when you try doing this same thing with a more complicated picture. It looks terribly unprofessional:

Resizing in the Builder

Fortunately, the resizing tools in the builder are easy to use and can protect you from making mistakes with proportion. There are two ways of resizing an image in the builder, and both of them are done from the Edit Text Window. You get to the edit text window by clicking on the words Format Text above any text box on any page of your website.

The first way to resize an image is simple, but not very precise:

1. Left click on the picture in the Edit Text window.
2. Eight little white squares will appear around the edges of the picture. If you click on one of those squares and drag it, the size of the picture will change.

Note: As long as you only drag the corner squares, the picture?s proportions will be maintained automatically.

The second way to resize an image is just a little bit trickier, but also more precise:

1. Right click on the picture in the Edit Text window.
2. A popup menu will appear; click Image Properties.
3. The Image Properties window will open. Notice the two text fields on the left side: Width and Height.
4. Click on one of those text fields.
5. Type in the exact size of the picture you want (measured in pixels).
6. Click OK.

Note: As long as the little ?lock? icon next to the text fields is closed, the builder will automatically change the numbers in the other text field to keep the picture in proportion. To open or close the ?lock,? simply left click on it.

Conclusion

Resolution mistakes: there aren’t many things that can make a website look more amateur. Using the tools in the builder properly can get you past all of that, though. The two rules are simple:

1. Always keep proportion.
2. Always resize down from the highest resolution you can get.

Follow these rules and you can’t go wrong; your site will look professional and potential customers will know exactly the sorts of quality products they can expect from you.

Popularity: 32% [?]