60 likes | 279 Views
Sliding Doors. Sliding Doors Tutorial. http://www.alistapart.com/articles/slidingdoors/. GIMP: Tab. New Image (420x200) Select Rounded Rectangle (radius 9) Color rectangle Create Border Select Border (1px) Fill Border with Color Make corners transparent
E N D
Sliding Doors Tutorial • http://www.alistapart.com/articles/slidingdoors/
GIMP: Tab • New Image (420x200) • Select • Rounded Rectangle (radius 9) • Color rectangle • Create Border • Select Border (1px) • Fill Border with Color • Make corners transparent • Layer Transparency Add Alpha Channel • Select by color Edit Cut • (Adjust color of corners) • Save image as TabComplete.gif • (gif or png support transparency)
GIMP: Create Tab • Open complete image • Cut left side (9x150) • Make sure you cut the whole corner • Save as TabLeft.gif • Open complete image • Cut right side (400x150) • Save as TabRight.gif
GIMP: Create Tab • Open complete image • Create lower border of tab (color of main page) • Select color for lower border (same as other border) • Use pencil tool to draw straight horizontal line (hold Shift Key) • Cut lower border (20x45) • Save as Border.gif • For current tab • Copy all three images and change color • To change color from indexed to RGB • Image Mode RGB
XHTML/CSS • http://www.alistapart.com/articles/slidingdoors/