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

This entry was posted
on Friday, September 2nd, 2005 at 4:13 PM and is filed under Web Design.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
1796

Leave a Reply

Like these tips? Get them for FREE in your email!

Tech Tips Daily - Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

Tech Tips Weekly - If you don't want our Tech Tips newsletter every day, then sign up for this weekly newsletter to get the best information of the week. Sent on Fridays.

Other Newsletters

WorldStart's Daily Deals - Every week, we send out great deals in our Daily Deals newsletter. Many of these deals are exclusively for our Daily Deals newsletter subscribers and can't be found with our regular specials.

Just For Grins - Each issue includes a couple clean jokes, some funny quotes, and a hilarious reader's story. Newsletter is sent five days a week.

Enter Email Address:

SubscribeYour e-mail address is safe with us!
We only use it to send you the newsletters you request. It is NEVER disclosed to a third party for any reason, ever! Plus, if you decided you don't like our newsletters (don't worry, you'll love them), unsubscribing is fast and easy.