Tech Tips Home
The Best Tech Tips And Daily Deals
Newsletter On The Internet!

Shop online 24hrs a day or call us Mon-Fri
8:30AM-4:30PM EST - 1-800-915-2088
WorldStart Tech Tip And Store Search
Email: Password: Login Remember Me

Like what you see here? Subscribe to the Tech Tips newsletter!   Email: Subscribe

Break Your Design

Friday, September 2nd, 2005 by | Filed Under: Web Design
 
Loading...


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:

image

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:

image

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.

image

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

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

image

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.

image

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

image

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

Comments are closed.

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

WorldStart's Tech Tips Newsletter

  • 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:

Subscribe

Your 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.

Free Newsletter Signup



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

The week's best in tech and computer help. Get your issue sent to your email every Friday!

WorldStart's Daily Deals

The very best deals on the Internet! Get a new set of incredible sales every day of the week!

Just For Grins

Clean jokes, funny quotes, and hilarious comics. Sent 5 times a week straight to your email.


Subscribe


Love Worldstart? Refer A Friend!

WorldStart's Premium Membership

Tip Archive


Categories:
Archives: