W e have had many emails asking us how we create some of the graphics we have within our site. Actually for most of them we use on line graphic editors that are free, easy and achieve the effects we want.
F
or this graphic we used two different editors to achieve the effects we wanted.
[ GifWorks ]
[ Adobe Graphic Editor ]
The below graphic we shall use as an illustration on how we have designed it from the ground up. First and formost you have to find the graphics and have an idea of what you want the finished product to relay, before you can even start and then work from there. This one we wanted to relay the message of tracking Santa Claus on his journey Christmas eve.
This particular graphic has five (5) parts that you need to be concerned with in the design.
1) The 3D Beveled White #FFFFFF Matte The Graphic Sits On
2) The Off White #FFFFFA Matte The Complete Graphic Is On
3) The Radar Graphic With White #FFFFFF Background
4) The Santa Claus Graphic With The Off White #FFFFFA Background
5) The Lettering
We first went to the "Norad" site itself and borrowed one of their graphics #3, the radar and dish image. We did not alter it other than change the background color. Since it links back to their site with the credit on our newsletter it is acceptable. Then we went to a clip art site and used the Santa Claus #4. Credit and link is also given for Santa clip art site on the newsletter.
The Santa Claus #4 is not copyright© but since we used it slightly differently and shrunk the original size, we gave credit where credit is due.
The seamless blending of the two graphics (Santa #4 & Radar Dish #3) was done by using the background color of Santa #4 which is #FFFFFA off white. We sent the Radar Dish #3 graphic to "GifWorks" (since it was originally a Gif file) and changed the background color (which was white) to the off white. Now the two graphics blend seamlessly. The matte color we used behind all the graphics and lettering #2 itself is also off white #FFFFFA so as to blend everything seamlessly.
Once we had all our colors blended correctly, we built the entire graphic with the "Adobe Graphic Editor". We started by using a flat white matte #1 and added a large bevel but no drop shadow to give it a 3D effect. We then layered that with the off white matte #2 that we added a small bevel and a medium drop shadow. Be advised that a drop shadow will only look correct with white or off white underneath. A drop shadow on a dark background will look like an ugly white box under the graphic.
Now that we have our foundation situated, we uploaded and started to layer the color coordinated graphics, #'s 3 & 4. We uploaded the Radar Dish #3 first which was 96 pixels high. We positioned it and then uploaded Santa #4 which was much larger in size. We constrained the proportions and reduced it to 96 pixels high also so both graphics would be the same height. Once we positioned it, we started to place the text on the page.
The font style we used on the graphic is "Isabella" with a medium drop shadow and a large bevel. Once we finished adding and positioning the text, we optimized the complete graphic and saved it as a JPEG file. The original completed graphic was 175K and once optimized it was reduced to 15K for quickness of loading.
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
|
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-