Tip #1796 - Break Your Design
Printer Friendly Version | E-Mail This Tip
WorldStart
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
Want To Comment On This Tip? Click Here! We'd love to hear from you :-)
Like These Tips? Get 'Em Free In Your E-mail
