3D Banner Layout

Our unique 3D illusion banner style is to contrast the center web page as the foreground object using additional transparent banner layers in between. The layers stacking on top of each other provides the Z-axis visually.

Different technique can be used to create the visual depth. For example, by assimilating the banner background with the page background (color), the banner can appear to be a part of the larger stage on screen.





720x350
600+600+60 x 300+50

Iconic - Cut Style SOP

Iconic-Cut

to re-skin a 3D icon (mask) object

1. prepare a display panel - reshape/reconstruct the panel dimension to fit 720x350 , please refer to the Operation_Fireworks_Display_Panel tutorial.
2. select the (screen) "display area", by increasing the tolerance until the marque covers the entire (gradient) display area. apply a 50% alpha on the original display color.
3. for 3D icon mask do not apply alpha
   
4. cut the bg image smaller than the display area in order to reveal more attributes of the 2D icon, such as leaf, flower, or woodgrain. apply a 30% alpha to let the 3D icon contour come out.
   
5. copy the bg image and paste it inside the (mask) icon.

Newsletter Message Script

Message.html Script
Step 1 - creating a standard message set (nnn-n#.html variant # = 0 1 ... 9 a)
Step 2 - creating a standard style set (nnn-#n.html variant # = 0 ~ 9 e.g. 600-4*.html), in each variant file, change the following urls to match the file name.

1. ++ the Message BG url: (craigslist/images/*-#x.jpg *-#l.jpg *#0.jpg *#0.png)
2. ++ the style # on the picture inserts url (artworks/library/lux/#*.png)
3. ++ the BG pattern image url: (artworks/bg/dark#.jpg lite#.jpg, papaer#.jpg, binder#.jpg )
   
4. ++ the color # on the message alpha_mask url variants (e.g. artworks/bg/alpha30#.png)
   

scope (600-4*.html)
replace (craigslist/images/600-0 -> 600-4)
replace (lux/300 -> 304)
replace (bg/dark0 -> 4, paper0 -> 4, binder0 -> 4)
replace (alpha300 -> 304)

Step 3 - creating the style variations (###-nn.html)

scope (604*.html)
replace (craigslist/images/600 -> 604)
replace (lux/30 -> lux/34)



Naming convention
nnn.png (nnn styles of bg artwork template)
nnn-vs.jpg/png (10 variations of 4 different size/color bg artwork)
nnn-vm.html (10 variations of 11 different message.html)

nnn = style number
v = variation number (000- 999)
m = message number (0-a)
s = message bg size and color [smlxd0] embedded inside the 0-a message as:

• n0.png - 0 3 no bg
  
• nl.jpg - 1 2 8 large size
• nx.jpg - 4 7 9 a extra large size
• nd.jpg - 5 6 dark bg

SCOPE (400-4*.html) (404-*.html)

• replace ( 400-0 -> 400-4) (src="fullurl /images/400 -> 401)
• replace (lux/300 -> 304) (lux/30 ->34)
• replace (bg/dark0 -> 4, paper0 -> 4, binder0 -> 4)
• replace (alpha300 -> 304)

Division and Construction of Design
The Layout is embedded inside the html, and
the Artwork is embedded as the background and inserts.

* the layout, format, color, and size are standardized as a selection in message.html,
** the background artwork contains protective watermark & Logo,
*** the graphic inserts are batch added live effects.