{"id":2012,"date":"2009-11-13T16:26:59","date_gmt":"2009-11-13T15:26:59","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=307"},"modified":"2016-12-04T09:44:16","modified_gmt":"2016-12-04T09:44:16","slug":"web-design-tutorial-centered-area-with-drop-shadow","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/11\/web-design-tutorial-centered-area-with-drop-shadow\/","title":{"rendered":"Web Design Tutorial – Centered area with drop shadow"},"content":{"rendered":"

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:<\/p>\n

\n
\n

Tutorial end product<\/h2>\n

\"aBlankCanvas\"
\nClick to enlarge<\/a><\/p>\n<\/div>\n

\n

Real-world example<\/h2>\n

\"a
\nClick to enlarge<\/a><\/p>\n<\/div>\n<\/div>\n

<\/p>\n

The following is a list of steps needed to create the drop-shadow page edge images using the freely available GNU Imagine Manipulation Program<\/a> (v2.6.6):<\/p>\n

    \n
  1. Create a new image: File > New<\/span>. Image size: 960 x 60, Fill with Transparency<\/span>.<\/li>\n
  2. Using the “Rectangle select tool” R<\/span>, draw a random rectangle, it doesn’t matter where you draw it or how big you draw it because once you have a arbitrary selection, specify the following attributes in the Toolbox: Position: 10, 10. Size: 940, 40 px<\/span>. The result should be a central rectanglar selection with a 10px margin on each side.<\/li>\n
  3. Select the “Bucket fill tool” Shift+b<\/span>, make sure the current foreground colour is black (d<\/span>) and click inside the selection to create a black rectangle.\n
  4. Shrink the selection by a pixel: Select > Shrink<\/span>, 1 pixel<\/span>.<\/li>\n
  5. Switch the foreground\/background colours (x<\/span>) so it’s now white and bucket fill the new selection to create a white rectangle with a black border.\n
  6. Add the shadow: Filters > Light and Shadow > Drop Shadow<\/span>. Offset X: 0, Offset Y: 0, Blur radius 10, Colour: black, Opacity: 50, Allow resizing: unticked<\/span>. The shadow is quite faint so it might be difficult to see until we have a white background.<\/li>\n
  7. Add two horizonal guides. Image > Guides > New Guide<\/span>. Horizontal, Position: 20<\/span> and Image > Guides >New Guide<\/span>. Horizontal, Position: 40<\/span>.<\/li>\n
  8. The guides make is so we can slice the image into three: Image > Transform > Guillotine<\/span>. Three new gimp windows will pop up. Save them as topShadow.png<\/em>, edgeShadow.png<\/em> and bottomShadow.png<\/em> and we’re done.<\/li>\n<\/ol>\n

    Here is the smallest amount of HTML (that I can think of) that uses these drop-shadow images to create a valid webpage:<\/p>\n

    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset="utf-8">\r\n    <title>Mockup<\/title>\r\n    <link rel="stylesheet" href="http:\/\/yui.yahooapis.com\/2.8.0r4\/build\/reset\/reset-min.css" \/>\r\n    <style>\r\n    .row {width: 960px;margin: 0 auto}\r\n    .topShadow {background: transparent url('topShadow.png') 0 0 no-repeat;padding-top:20px;margin-top:40px}\r\n    .edgeShadow {background: transparent url('edgeShadow.png') 0 0 repeat-y}\r\n    .bottomShadow {background: transparent url('bottomShadow.png') bottom left no-repeat;padding-bottom:20px}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div class="row topShadow"><\/div>\r\n<div class="row edgeShadow"><p style="height:400px;text-align:center">Hello world!<\/p><\/div>\r\n<div class="row bottomShadow"><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    Notes:<\/p>\n