Create/Customize Site Elements
Site Elements are composed of a Top Image, a Left Hand Side Image, and a Background Image.
Your Top Image sits at the top of each page on your site...
Notice that there is no Logo. The Top Image is the background upon which your Logo sits...
The Left Hand Side Image is aligned to the top left and forms the left margin of your Web page. The NavBar sits on top of this background.
The Background Image is a small graphic that repeats itself over and over (both sideways and vertically) to create a Web page's background. This tiling pattern fills the entire browser window.
As you can see, Site Elements form your Look & Feel's "foundation," upon which you will add the Logo and NavBar...
The Process
Let's review the two main options for creating your Site Elements...
1) The first option is to select one of the dozens of themes available in the Look and Feel Selector, or from this collection of Additional Themes. To get a better sense of how each one looks full size, click on the Preview button in the Look and Feel Selector, or click on the image to preview the template in Additional Themes (only one color combination appears in the full screen preview for the Additional Themes).
For L&F Selector themes, click on the Select Color Scheme number to see what each color looks like. For Additional Themes, view both color combinations by clicking on each color text link. Clicking on some of these links displays a different template, so be sure to view both presentations.
If you're using an L&F Selector theme, this is also where you choose to use a 2-column layout or a 3-column layout. Preview each to see what it will look like. (Note that there is no 2-column/3-column option in Additional Themes.)
Alternate design methods in this option include buying an SBI!-compatible template (visit the Site Design Tools section of SBI! Resources), having an SBI! Coach design one for you, or creating your own Site Elements images using your graphics program.
2) The other main option is to use SBI!'s online image creators to create your Site Elements. The Top Image and the Left Hand Side Image use the same easy process. The Background Image (if you want one) uses a slightly different process.
Skip down to Using SBI!'s Image Creators if you've decided to use SBI!'s online tools.
Have you selected an Additional Theme, or are you going to use your own images? If the answer is "yes" for either one, continue reading.
Using an Additional Theme, or Using Your Own Images
-
Download the template you like, open the folder for the color you prefer, and customize the graphic files in the folder. Do not change the names of the images or their height and width.
OR
Create the images using your own graphics program. The images must be saved in .jpg or .gif format.
If you add a Logo to your customized or new Top Image, you also need to follow the Customize Logo help and remove any Logo text there.
- Click on the Create/Customize Site Elements button on the tool page.
- Select each file using the Browse button (Choose File if using Safari) and Upload the graphic. If you purchased a template, upload those graphic files here.
- Click on the Show Me button to see each particular graphic. Click on the Preview button to see the overall effect of the Site Elements.
- Click on the Create/Customize Site Elements button to finalize the foundation of your L&F.
- Return to the Look & Feel Selector tool page. Click the Preview button to see what your total L&F will be like. If you are satisfied with it, click on the Select/Save this Style button to make your custom template go "live" on the Web.
There are two possible scenarios. Choose the one that applies to your situation...
Scenario #1 -- You're using one of the Additional Themes...
1) Download the theme package you wish to use.
2) Customize one, two or all of the three files, using your graphics software. Some Top images may need their height reduced to 120 pixels. If you want to add the right column to your design, you'll need to make the top image 960 pixels wide. See this TNT article for details on how to do that...
http://sbitips.sitesell.com/resizing-725px-image.html
3) Upload the three files.
Scenario #2 -- You purchased a template, had one designed, or created one from scratch using your own graphics software...
Skip Steps 1 and 2 (from above) and upload the files in Step 3 (if the Top Image height is 120 pixels or less). Note that if you hire an SBI! Coach to create a design, your coach will upload the files for you.
The final step for both of the above scenarios is to click on the Select/Save this Style button on the Look & Feel Selector tool page.
If you forget to do this, your work will be lost. The next time you return to this tool page, your last selected style will be accessible. (Or you will have to start again if that was your first design).
Tips
-
The template file you download is a compressed Windows .exe file. Double-click on it to start the auto-extract process.
Mac users need free software like Stuffit Expander V12 or newer to uncompress the file.
- Simplicity is the goal. Beginning designers often fall into the trap of confusing cool effects with design. Always remember to stay focused on the overall theme of your site content, and the impression that you want to make on your visitors.
- Read the associated UsingThisStyle.txt file for the package you downloaded -- you'll find useful information on colors, fonts and effects for your Logo and NavBar.
- Use your graphics program (ex., Paint Shop Pro or PhotoShop) to modify any or all of the images. If you want to add a styled Logo to the Top Image, now is the time to do it.
-
If you're creating/customizing your own images, select the 2-column or 3-column layout first.
The Top Image must be no wider than 725 pixels for a 2-column layout; no wider than 960 for a 3-column layout. (Exceeding the width will create unpredictable results when you start adding content to your pages.) The height can range from 70 to 120 pixels (depending on your template). If you go taller than that of the pre-existing Top Image, it might cause one or more of your nav buttons to sit atop your header.
The Left Hand Side Image must be 130 pixels wide. The height isn't as important. (450 pixels is common.) Because this image repeats itself down the page, be sure that its design will blend well.
A common technique for the Left Hand Side Image is to create a strip of color (from top to bottom) that fades to white or to your background color. Whatever you do, it must "fit" nicely with the Top Image.
The Background Image also repeats down the page and is most often left white. If you use a non-white background, make a small .gif image (1x1 or 2x2 pixels), light in color so that the text on the page is easy to read. Do not use a "reverse effect" (dark background with light text) for a content site -- studies show that viewers tire more easily, and it causes much longer print times.
If you want a line down the right side of your template, create an image that is about 20 pixels high and about 730 pixels wide (if your site is left aligned). In your graphics program, add a shadow or a line or something at the far right edge of the image.
You can use larger graphics if you want to create a textured look. But once again, remember your reader. If a page is hard to read (whether on screen or printed), your reader is likely to give up.
- Save customized or new images with the proper file names (top.gif or top.jpg, left.gif or left.jpg, back.gif or back.jpg).
- The "Show Me" link always shows the last image (of each kind) that you uploaded. Use the "Preview" button if you want to see what a newly uploaded graphic looks like in the template itself (i.e., the bigger picture).
- If you see an error message (ex., "change of file name") when you click on the Create/Customize Site Elements button, SBI! will tell you how to fix the error.
- At any time, you can modify any of the images, then upload the file(s) again to change your L&F.
- For additional help and/or ideas, please review the Look & Feel Selector Forum FAQs at http://forums.sitesell.com/viewtopic.php?t=12195.
Using SBI!'s Image Creators
- Click on the Create/Customize Site Elements button in the Style: Custom selector.
- If applicable, use the Show me link, to view your current images. Click on Delete if you do not want to replace a current image with another one. (You could simply upload or create a new one to replace this one, which deletes it automatically.)
- Click on the Create/Customize My Own button for the Top Image.
- To add a texture to your Top Image, choose from the Select Image menu.
- Choose a Color Overlay to tint your texture.
- If you do not want a texture, Select Color 1 using the color palette.
- Select Color 2 (if you want one) using its palette.
- Choose your Blend gradient from the menu. Choose your Blend Direction.
- Click on the Preview button to see the overall effect of the Site Elements.
- Click on the Create/Customize Top Image button.
- Repeat the process to create the Left Hand Side Image. Create the Background Image (the same process, but without Blend and Color 2).
- When finished, click on the Create/ Customize Site Elements button to finalize the foundation of your L&F. This will take you to a confirmation page. From there, you return to where you were on the Look & Feel Selector tool page, ready to customize your Logo and NavBar.
- After you've finalized the Site Elements, Logo, and/or NavBar, return to the Look & Feel Selector tool page. Click the Preview button to see what your total L&F will be like. If satisfied with it, click on the Select/Save this Style button to make your design go "live" on the Web.
SBI!'s image creators are Web-based tools that allow you to create each of the Site Elements, without needing your own graphics program.
Each image is built to fit perfectly into the design template. The Top Image will be 725 pixels wide if you choose the 2-column layout, 960 pixels wide for the 3-column layout, and the Left Hand Side Image will be 110 pixels wide.
The Process
Clicking on the Create/Customize Site Elements button on the Look & Feel Selector tool page starts the ball rolling.
If you're updating your current design, take advantage of the "Show me" link. It shows what your last uploaded version of each element looks like. You can also delete that image, if you wish.
Start your customization action with the Top Image (if applicable). Click on the Create/Customize My Own button and you're off!
Using the graphic tools provided and the Preview button, experiment until you achieve the results you want for your Top Image.
Save those changes by clicking on the Create/Customize Top Image button.
If you decide to customize the other two images, explore and experiment with their graphic tools. Then click on the Create/Customize Left Hand Side Image button and the Create/Customize Background Image button, respectively.
Once you've finished customizing the Site Elements, Logo, and/or NavBar, you must click on the Select/Save this Style button on the Look & Feel Selector tool page to activate your new L&F.
If you forget to do this, all of your work will be lost. The next time you log in, either your last selected style will be accessible or you will have to start from the beginning again, if that was your first design.
Tips
- Simplicity is the goal. Beginning designers often fall into the trap of confusing cool effects with design. Always remember to stay focused on the overall theme of your site content, and the impression that you want to make on your visitors.
- You do not have to use the same tools for all three graphics. For example, if you want to use your own software to create the Top Image, go ahead. Use the image creator for the Left Hand Side Image. If you're happy with a white background, you don't need to create a background graphic.
- You cannot select a texture and select a Color 1 for the Top Image or the Left Hand Side Image. You can do one or the other.
- A common technique is to create a strip of color that (from left to right, or top to bottom) fades to white or to your background color. You can create this for the Top Image or Left Hand Site Image with the Blend function. Whatever you do, it must "fit" nicely with the Top Image.
- If you choose a Color 2 for either the Top or Left Hand Side image, you must also choose a Color 1 and a Blend gradient. Otherwise, there is no point in selecting a second color.
- For your background image, do not create a "reverse effect" (dark background with light text). Studies involving content sites show that viewers tire more easily, and it causes much longer print times.
- What if you decide that you don't like the design you just created and finalized? Return to the Site Elements section and do it over again. If you haven't finalized the design yet, you can click on the Site Central link in the top right corner of the page. Any previously saved changes will remain in effect.
- At any time (even after you have built your site), you can return to modify any of the images you created.