Break Your Design

Is the design for your main page ready? Good. Now let’s break it apart.

Really. Now that you’ve completed the design for the main page of your site in a graphic program it must be broken down into smaller pieces and reassembled in a web page building program. This is done so the page loads faster on the user’s end.

Remember the straw analogy from last week? Well here it is again. Picture that the Internet connection coming into your house is the size a drinking straw. You need to make sure that the file size of the graphics you are creating are small enough so that they travel quickly through that straw without clogging it up. If the file size of the graphics is too large it will take longer for your site to load when someone is trying to pull it up to view it. One way we keep the file size small is to create the site in graphic program at the resolution of 72 pixels per inch. Another way is break apart your design into smaller pieces. This sounds weird but let me just show you.

Here is design for my main page:


Click for larger image

I’ve kept the design simple yet it’s still fun. The white background has a clean look and it’s great for keeping the files size small J

Here is what my design looks like once I’ve decided how I’m going to break it apart:


Click for larger image

I know this looks a mess but there is a rhyme and reason for the placement of the blue lines. Those blue lines are basically my ‘cut marks’ or guides. I’m using them to keep track of the pieces of my design. Be logical about your approach to creating the smaller pieces. Keep in mind that you have to reassemble the design. You don’t want it so complicated that you can’t figure out how to put it back together.


Click for larger image

The areas indicated by the color highlights give you a better idea of what my pieces will look like.

You will save your pieces as either JPG or GIF.

JPG stands for Joint Photographic Experts Group. I save files as JPG’s when they are a photo or graphic that has a lot of different colors in it. For example, the pictures of Lily in my design will be jpg’s

For file size comparison I have saved the same piece of my design as a JPG and a GIF

The above file is a JPG and its size is 4.31k


The above file is a GIF and its size is 10.29k

Always go with the smaller file size as long as you see that you haven’t lost any of the quality of the picture.

GIF stands for Graphics Interchange Format. I save a file as a GIF if it has a simple color scheme—one or two colors. The Lily Super Dog part of my design is perfect as a GIF.


The above file is a GIF and its size is 2.38k


The above file is a JPG and its size is 3.27k

There isn’t a huge file size different between these two but those k’s add up so save a few when you are able to.

That’s enough for today. Try taking some of your graphics and seeing which file format, JPG or GIF, works best when you save them. We’ll continue this discussion next week.

~ Kim

Kim Ganues

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.