|
|
|
Published : December 11, 2006 |
Author : haui
Category : TGP | Total Views
: 1555 | Rating :     
|
|
|
| |
haui
Hi Folks, we bring you here tons of tutorials writen by great webmasters and collected them over at Netpond.com
|
|
|
|
Tutorial by Pany:
How to build a basic TGP gallery template using Dreamweaver & Photoshop Part 1 of 2
Many people starting out in the business begin by submitting galleries to TGP sites. What many of them do not know is exactly how to design their own templates or how easy it is, the rules involved, or tips and tricks to help increase click-thru's to the sponsor.
What I am about to show you, is a simple way to create a TGP gallery template that you can use for more than one sponsor, over and over again. A basic html template that will go from looking like thisto looking like this.
*You can hand code or use any html editor as well as use any image editor you choose. I wrote this tutorial using Dreamweaver and Photoshop because those are the tools I personally use.*
Step 1:
-
Map out on a piece of paper exactly how you want your gallery to look. This is important for you will use it as your guide when building your template.
For this example, I am going to build a 16 picture template that is 760px wide. There will be 6 rows, each containing anywhere from 3-5 thumbs per row. Shade the areas in where you want your thumbs to appear, leave space for text and advertising. This will help you to give a visual on exactly how you want to format your gallery. This does not have to be perfect. It is only a rough sketch. Example: http://www.pankyspink.com/netpond/tutorials/gallery/paper.jpg
*760px was used because the template will be centered and fit well into any resolution the surfer and/or reviewer may be using to view your gallery.
Some things to keep in mind when mapping out your templates if you are creating the templates to be used for galleries that are submitted to TGP sites.
-
Content is always the main focus of your gallery. You should always begin your first row of thumbs as close to the top of the page as possible. Do not use headers or ads that are more than 200px in height. Your headers should be around 100-150px in height.
Use at least 1 row of thumbs before any advertising. Reviewers prefer to see at least 1 row of content before any advertising. Some people choose to use text before their first row of thumbs. This is perfectly fine. Just remember to keep your content as close to the top of the gallery as possible.
Sponsor links towards the middle and bottom of your gallery will get clicked far more than links at the top of your gallery.
Do not design galleries that appear to be huge billboards of advertising. Content is what sells a gallery. Reviewers will look at your content before anything else.
Do not use what is called a center ad. The majority of reviewers will reject you for use of a center ad. Example center ad: http://www.pankyspink.com/netpond/tutorials/gallery/center.jpg
Get creative with your layouts. Use landscape and portrait thumbs. Create odd size thumbs. The more unique your galleries are, the more chances you have of the galleries becoming listed. Reviewers will also remember you and are more likely to list your galleries.
Minimum of 15 thumbs.
-
In Dreamweaver, insert a table that is 760px wide, 1 row by 1 column. Center the table. Cell pad 0. Cell spacing 0. Border 0. (I added the border and color for example purposes only.)
This table is important because it acts like a container to hold the rest of your gallery in place so that the gallery will always be centered and not have text and images appearing off the side of the page.
-
Insert image placeholder and label it "header". (Insert / Image Objects / Image Placeholder)
Fill in the width, height, and color attributes. (760w, 100h, and whatever color you wish to choose for the placeholder)
Align = absolute bottom
Step4 - Row 1 (orange)
-
Insert a table that is 760w, 1 row, 5 columns, cell pad 2, cell spacing 0. This table will hold your first row of thumbs.
Step 5 - Thumbs (yellow)
-
We know that our template is 760w. Divide 760 by 5 = 152. (We divide by 5 because that is the maximum number of thumbs used in a row on our gallery.) What this number tells us is that we can use thumbs that are no larger than 152px wide. If we use thumbs any wider than 152px, it will expand the template wider than 760px.
You do not want to use thumbs that are exactly 152px wide. The reason is, you still need to factor in the cell padding and the 1px border we will place around each thumb later. The height of the thumbs can be any height you choose to use. For this template, I chose to use thumbs that are 140px wide and 170px in height.
Now we can begin to add our image placeholders for the thumbnails into Row 1. In Dreamweaver, click on the first cell in Row 1 and add an image placeholder. Label the holder as "thumb", set the width and height attributes, and choose a color. (for this gallery use 140w by 170h) (Insert / Image Objects / Image Placeholder)
Add an image placeholder to each of the remaining 4 cells. When all cells are filled, highlight all the placeholders you just added in Row 1 and center them.
-
Refer back to your draft. Row 2 consists of 3 thumbs. Insert a new table below Row 1, that is 760 px wide, 1 row, 3 columns. Cell padding is 8, cell spacing 0, and border is 0. Center the table.
Repeat Step 5 and add a image placeholder for the thumbs into Row 2. These thumbs are 140w x 170h. Make sure to center the placeholders.
-
Insert a new table below Row 2 that is 760px wide, 4 rows, and 4 columns. Cell padding is 2, cell spacing is 0, and border is 0. Center the table. (I added the border for a visual example only)
Row 3 - Text Example: http://www.pankyspink.com/netpond/t.../step7-row3.jpgRefer back to your draft. You will see that you have Row 3 reserved for text/ad and link to your sponsor. Now you want to make this row all one cell. Right click in the first cell in Row 3. A menu will appear. (Table / Increase Column Span) Repeat this step until all the columns are clear. (I left the table border on for a visual example.)
Row 4 - Thumbs Example: Step 7 Rows 4-6 http://www.pankyspink.com/netpond/tutorials/gallery/step7-row4-6.jpg Refer back to your draft. Row 4 consists of 4 thumbs. Repeat Step 5 and add 4 image placeholders that are 140w by 170h. Make sure to center the image placeholders.
Row 5 - Text Refer to Step 7, Row 3. (You can add an image placeholder if you prefer to use an image join link or animated gif to link to your sponsor. You can also add text with the image.)
Row 6 - Thumbs Repeat Step 5 and add 4 image placeholders that are 140w by 170h. Make sure to center the image placeholders.
*If you want to add a third link to the sponsor, just add another row to the table or add a link at the bottom of the gallery outside of the main table. You can also add the 2257 information here.
Your basic template is now complete. You want to save the template, for you can customize this template to match multiple sponsors. In Part 2 of this tutorial, I will walk you through the steps of customizing the template to match a chosen sponsor.
Whenever I save my basic templates, I name them something like template1-760-16.html. What this tells me is that the template is 760px wide and is made for 16 pictures. When you want to use a template for a gallery, copy the template and rename the template to index.html or index.htm in your gallery folder.
Build 8 different template layouts. You can then rotate one template for each day of the week. Example schedule:
This way, you will not get penalized for submitting the same template every day. By using 8 templates, the week is offset, so not every Monday you are submitting the same template as the previous Monday. It just makes for a nice even rotation and keeps your galleries looking fresh.
You can also build gallery templates for for submitting to MGP sites, for your own hubs and portals, and freesite templates, much the same way as you just built a TGP gallery template.
Link to download basic template & tutorial: http://www.pankyspink.com/netpond/tutorials/gallery/gallery.zipThese are examples of galleries using the same template as the one you just built. (Link codes have been removed.) They will give you a visual as to how you can use the same gallery template for multiple sponsors. Part 2 of this tutorial will explain how to customize generic gallery templates for each of your sponsors.
|
|
|
Visitor's Comments ! |
|
|
|
Random Pick |
Yet another great tutorial from _LB_ on how to make money in this industry with day by day instructions and observations. |
|
|
Statistics |
| » Total Articles |
94
|
| » Total Authors |
15
|
| » Total Views |
86354
|
| » Total categories |
13
|
|