A screenshot from Firefox 1.5, OPERA 8.53 and I.E 6.0.
A screenshot from Firefox 1.5, OPERA 8.53 and I.E 6.0.
*This tutorial will only cover the usage of Adobe Photoshop CS2
for designing & Notepad for laying the HTML and CSS layout of the MAIN
page. We won't cover the making of the sub-content pages (i.e ART, DOODLE, BIO,
LINKS, TUTORIALS, etc) which was designed using Macromedia Dreamweaver MX. Please
forgive us for dumping everything into 1 long webpage. You can download
the zip version here.
There are many ways to design a website. Some uses programs like Coffeecup (bloggers should know this), Microsoft's Frontpage (WINDOWS, usually bundled with OFFICE packages, popular among corporate user), Macromedia Dreamweaver (popular among graphic designers) Adobe GoLive (we haven't use it yet) etc. Or if you enough cash or have something to offer, you can hire other people like us to design one for you.
This tutorial is however design for newcomers in html. Here we used a combination of Adobe Photoshop Notepad and Macromedia Dreamweaver. The web-design techniques employed in this page involves the revival ideas of 'HOTSPOTS', 'IFRAME', & 'ABSOLUTE POSITIONING'. We however regret to inform that the techniques involved here isn't so brilliant since its a cut-to-pieces and put them up together technique. In other words this design actually still revolves around the idea of trying to cut and fit a design into a series of rectangle rows and columns within a table. Unlike in one of our previous version (version 2) OOPSMURAL, we employed techniques where we were actually utilizing the absolute positioning of divs with overlaying techniques using z-index.
1. The purpose is to showcase NJ's artwork and talents.
2. Think and design the layout. Here we thought of using a floating frame.
3. Picked one of his best artworks that defines him the best.
4. Prepared the list of font's that will be used.
5. Drew thumbnails and make notes.
6. Set target deadline.
Our next move was to open ADOBE PHOTOSHOP. Yes, we didn't actually prepared the content first in html. We were using the visual approach first. Most people would placed the basic contents in HTML before laying out the designs. But since we were a bunch of amateurs or maybe intermediates who originally came from FINE ARTS and Illustration background... we basically usually use this approach in most of our webdesigns. Depending on the nature of the project, we use different approaches. We did prepare a few simple thumbnails on papers but it didn't took long because we will be spending alot of time playing inside Photoshop since we will be able to experiment more things with the tools available..
We used Adobe Photoshop CS2 in the process of designing NJ's web layout. We did use a little of Photoshop 5.5 somewhere in between. That means you could use Adobe Photoshop 5.5 - 8.0 since the techniques & tools used here are mostly basic and are available in version 5.5 - 8.0. However for this tutorial, we will be using ADOBE PHOTOSHOP CS2. You ll get to learn the basic functions inside Photoshop.
Inside Photoshop.
Here, we prepared 3 images. As you can see, we pick the bottom image since the art reflects the common genre of the artist's art: 'anthromorph'. Also the art is great since NJ spent alot of time on it, it was also his very best effort in (refining) trying to knock off outlines in FINE ART painting. (2 THUMBS UP TO NJ!) ...truth is, it was just a random pick.
Selecting artworks.
Press CTRL + A to select the whole image. Press CTRL + C to copy the image. You may also use CTRL + X to cut the selected image.
Copying Image to clipboard.
Next we are going to prepare a clipboard. This clipboard will be used to design our layout. The image that is just being copy (or cut) is already inside the computer's memory. Now go to File, select New... (CTRL + N). Select the 1024 x 768 (pixel) layout size. 1024 x 768 is a standard display setting in most of the computers. Make sure 'Background Contents:' is transparent.
NOTE:For those using ver 5.5, you don't have the option function, just input the width & height manually.
Selecting the size of the clipboard to work on.
Set transparent background.
Now paste the image inside the clipboard, press CTRL + V. This is the first layer.
Paste the image.
OK, now its time to resize and crop the image. Here we planned to place his face on the left so we are going to crop the background so it would look like this (IMAGE B). You may use any method to crop the image. To resize press CTRL + T to bring out the resize mode (also known as FREE TRANSFORMATION TOOL). While in resize mode, pressing ESC will bring you out of the mode. Pressing and holding the SHIFT button will let you resize the image (or object) with the whole proportion constrained.
We decided to show just a portion of the image, not all. Just a portion of the character's face. Transformed it abit larger. There you go, it looks nifty and catchy. "hi... i looked tough, eh? wanna brawl?" OK, we decided that the image should just take 1/3 of the whole design. The IFRAME will be somewhere on the right. Well, here we will e cleaning up and making some mock ups on the pictures. Brightening a few areas, chipping a little hair...
IMAGE B.
OK, we are now working on a 1024 x 768 pixel board. We need to set the size smaller because we know if the design were really going to be 1024 x 768, its not going to look very nice in I.E (too big). Here we already planned on a width of 850 pixel & height of 600 pixel. 850 x 600 pixel. To resize go to IMAGE > IMAGE SIZE or press ALT + CTRL + I to bring out the resize image menu. (IMAGE C)
IMAGE C.
Here you can make the appoporiate adjustments. Just adjust the width and height. You may play around with the 'Constrain Proportions' option in the menu. Just leave the rest alone by default. (IMAGE D)
IMAGE D. The IMAGE RESIZING MENU.
Now we are going to create and play around with a few layers. Here, we will try explain the basic usage of layers. In ADOBE PHOTOSHOP, LAYERS are like transparency papers. Imagine you had different thin transparent layers of paper on your table, in your hands you have the tools available to draw, color & erase doodles. You can also arrange the layers by bringing a layer forward or backwards. I hope you get the idea because this is how ADOBE PHOTOSHOP basically works.
To make new layers simply go to LAYERS > NEW > LAYER. Or press SHIFT + CTRL + N See (IMAGE E).
IMAGE E.
OR
Press F7 to bring out the LAYERS window. Do as show in IMAGE F.
IMAGE F
The Layers Window is very useful, from here onwards, you can rename (double click to rename), delete (drag it to the little dustbin icon at the bottom right), select one or more layers (hold CTRL or SHIFT), drag (drag the highlighted layers), set special effects, merge, edit, lock one or more layers and even add masks to different layers. Here you can also set the opacity level of each layers.
OK, now we decided to make a layer and name it bg (background). And we filled the background with the desired color (FFFFCC), a soft yellow earthly color to blend in with the character's tanned skin as well as the color of his large beads on his neck, resulting in IMAGE G. We also make a new layer called IFRAME. For IFRAME, we made a white filled square box sized. This is actually a reference on how and where the floating frame will be located.
IMAGE G
IMPORTANT NOTE!
Since we wanted the files inside the IFRAME to have the same background color as the one we wanted the whole design to look like, you must choose a color that is web-supportable. Here in this case we choose the color which is #FFFFCC or #FFC. If you are not careful you may end up seeing a little color difference.
When picking color for web always highlight the 'ONLY WEB COLORS' See Image below.
WEB COLOR
We then proceed to make the menu. *Note: the raccoon guy IMAGE layer is always on top.* First we used a pencil tool to draw a '1 pixel sized' straight horizontal line on a new layer which is named 'line up'. We proceed to duplicate the layer. On the highlighted 'line up' layer, right-click (windows user...) and select 'Duplicate layer...' (IMAGE H). The new layer will automatically be named 'line up copy'.
IMAGE H
Next, we made a new layer a named it lo opac. We drag the layer and placed it under 'line up'. Here we drew a colored background and set the opacity to 48% just to get the desired soft color. (IMAGE I)
IMAGE I
You may notice in IMAGE I, 3 layers are linked. We linked the layers so that all 3 layers will be able to move together when we nudge them to our desired positioned. To link the layers, simply highlight any one layer then press and hold CTRL to select and highlight another two layers. After with all the 3 layers hightlighted, press the 'LINK BUTTON'.
Linking the 3 layers.
Press the link button again to break the link between the 3 layers.
Here's a small screenshot (SCREENSHOT 1a) with the finished menu. We made and experimented with 7 - 10 layers to design the menus. Finally we reduce the layers by merging a few layers. You may notice here the menus were abit different. That's because we made a few last minute changes during the mockup period.
SCREENSHOT 1a.
To merge layers, go to LAYERS > MERGE DOWN. Or press CTRL + E. When there are too much layers in your work, you may try to reduce it by merging afew layers or delete some unwanted layers.
Merging down.
Below here, we used the same techniques to create the 'Disclaimer area' (IMAGE 1b)
IMAGE 1b.
Completing the Heading, Title, NJ mark & adding the copyright mask at the bottom. (IMAGE 1c)
IMAGE 1c.
We did drew a 1 pixel border but it's hard to make a thumbnail to show it. XD
After completing the layout, we decided to draw some guides. Go to VIEW > RULER or Press CTRL + R to bring out the ruler. (IMAGE 2a)
IMAGE 2a.
As shown in IMAGE 2b, this is the view with Ruler Guides On. Now to make guides, simply bring your cursor to the ruler (as shown in the middle of IMAGE 2b), click and hold then drag down and position the guide. You can make new guides this way. To erase one guide, simple select the (IMAGE 2c) MOVE tool, select the guide and drag back to the ruler.
IMAGE 2b.
IMAGE 2c.
To hide the guides. Go to VIEW > SHOW > GUIDES or press CTRL + ;. To unhide them, do the same. To delete all the guides. Go to VIEW > CLEAR GUIDES. To lock the guides, go to VIEW > LOCK GUIDES or press ALT + CTRL + ;.(IMAGE 2d)
IMAGE 2d.
As shown here in IMAGE 2e. This is our final piece where we can cut into pieces and later put the pieces together in html or position the pieces in css. We breaked it into 4 pieces. Notice the tiny blue horizontal and vertical guide lines. Sorry if isn't so clear here.
IMAGE 2e. A thumbnail of our work with guides.
Now we can save it as a photoshop MASTERFILE. Saving as masterfiles (filename_here.psd) enable you to perserve the layers and fonts as well as guides. An important note: ALWAYS SAVE YOUR WORK! To save, just go to FILE > SAVE AS... or press CTRL + SHIFT + S. Choose your destination folder and save it as a (Format type) PHOTOSHOP file which is your_filename_here.psd. In Adobe Photoshop CS2, you can add a comment in your save.
Whenever you need to make any adjustments or changes, perhaps afew mockups (cleaning, retouching). Just open the .psd file to edit your changes. Bear in mind that if your works contain alot of layers and espeacially if there is alot of masks and font layers, no matter how small the .psd file is, it takes a hell lot of time for Photoshop to open. And if you decided to transfer your work on other platforms with earlier versions of Photoshop, bear in mind, make sure your .psd files are compatible. Also if the platforms do not contain the fonts you need, you will need to bring your own fonts to install.
After saving the final work and restarting the PC to clear the memory cache. We opened back the .psd file to begin some cutting. With the guides now available, highlighting and selecting will be easy. After making some small changes, and some some final consultation and afew pieces of rough comments. We can merge all the visible layers by flattening or merging the visible layers. Flattening will result in discarding the non-visible layers. Choosing to merge visible will merge only the layers visible to our view. The non-viewable layers are simply left alone.
IMAGE 3a below will show you how to merge or flatten your layers. There is no quick key in to Flatten all the layers. Flattening is usually an option to end our work. It is advisable to flatten most of your final work if you want to save it in *.jpg, *.gif, *.bmp, *.png formats. Press SHIFT + CTRL + E to merge visible layers.
IMAGE 3a.
Cutting or slicing is simple. Since the guides are on, we can highlight the exact size we need. Once highlighted press CTRL C to copy or CTRL + X to cut. Here we used the rectangle marquee tool (IMAGE 3b) to select the slices. After that, we opened a new (CTRL + N) (transparent background) window and paste it. To paste press CTRL + V. Since there were 11 sections, we repeat the process 11 times.
IMAGE 3a.
Ah, finally here. So we just sliced it into 4 pieces, right? Well, time to
save it. We have the option to save it in whichever format we wished. Here we
simply saved all of it as filename_here.jpg. Quality level: 9 or HIGH. No matte.
Baseline: Standard. You cannot save transparency as .jpg. JPG offers no transparency
at all. For transparency .gif and .png is more suitable, still depending
on how it is being utilize. We choose .jpg because of it's image quality and
small size.
Saving as *.gif, you must choose FILE > SAVE FOR WEB... Dont simply
use FILE > SAVE AS... and choose the *.gif extension. GIF is best suit
for saving monotone or indexed color works, black and white works, transparency
for web. Saving as GIF gives you the option to optimize. Optimizing will
slightly reduce the image quality to reduce size. You also have the choice to
interlaced it.
You must understand the choices you want to make when saving the images to be
view on the web. The 3 most common types are JPG, GIF and PNG. GIF and PNG supports
the usage of transperency. Each of them has their own unique color depths, forms
of compression, and transparency effects.
To learn more, you need to do some research and readings. Experience (experimenting)
is also very important and it is mostly through this method, we at OOPSMURAL
utilize since most of us are poor to attend (as full time students) some wickedly
blood-sucking expensive colleges. Nevertheless, we are not saying education
is not important. IF YOU THINK EDUCATION IS EXPENSIVE, TRY IGNORANCE.
One of the books we recommend for reading is:
The Zen of CSS Design: Visual Enlightenment for the Web
By Dave Shea, Molly E. Holzschlag
We did bought this expensive book at our local bookstore. Well-worth the reading
and references.
TOP
Previously we've done the designs and slices of images in Photoshop. Now it's time to place them perfectly inside html. Here, we planned to not use any tables, instead we are going to use divs and we are going to positioned them carefully inside the page.
The reason why we didn't want to use tables is simple. First, few years back, we designed OOPSMURAL with divs and learned to like it because you can place them on a fixed position. Secondly, tables are for data. Tables also made webpages to load a little slower. Considering the fact that some of our friends in rural areas (where you can still see buffaloes and storks...) has poor internet connection and old pc (for goodness sake, a windows 98?!!) And besides we wanted to take a new approach in experimenting new styles of codes.
Layout? Well, as you all may notice... OOPSMURAL has 'almost' one thing in common: IFRAMES and windowed style webpages. Here we going to use notepad to construct the webpage. We are going to make 2 files. One will be a html file, the other will be a css file.
NOTEPAD. Well, you are welcome to use DREAMWEAVER if you want. Reasons for us using notepad is actually simple, we decided to polish up abit of our old-school skills. For those you linux and mac users, we are pretty sure you have simple doc-editing programs like NOTEPAD. Personally we don't own a MAC because it's expensive here, and we indulge alot in popular PC GAMING.
The construction of the basic html elements begins.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- type whatever comment you want here -->
<html>
<head><title>your title here</title>
</head>
</html>
<style type="text/css" title="your_css_title" media="all">
@import "location_and_name_of_your_file.css";
</style>
<body> </body>
<div id="boxwrapper"> </div>
<div id="boxwrapper">
<div id="headermenu"> </div>
<div id="column1"> </div>
<div id="column2"> </div>
<div id="footer"> </div>
</div>
<div id="headermenu">
<div id="menu">
<a href="art.htm" id="art" target="w"><i>art</i></a>
<a href="doodle.htm" id="doodle" target="w"><i>store</i></a>
<a href="bio.htm" id="bio" target="w"><i>info</i></a>
<a href="links.htm" id="links" target="w"><i>links</i></a>
<a href="tutorial.htm" id="tutorial" target="w"><i>services</i></a>
</div>
</div>
<div id="column1">
<div id="menu2">
<a href="updates.htm" id="updates" target="w"><i>update</i></a>
</div>
</div>
<iframe height="368" width="480" id="inlineframe" name="w" frameborder="no" src="source_page.htm" allowtransparency="true" border="0" framespacing="0"></iframe>
Finally below here are how ALL the codes would look like. We then save the work as file_name.htm. There you go a html page! Next we ll be doing the css file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!-- type whatever comment you want here -->
<html>
<head><title>your title here</title>
<META name=author content="your name" >
<META name=description content="the contents of your page" >
<style type="text/css" title="your_css_title" media="all">
@import "location_and_name_of_your_file.css";
</style>
</head>
<div id="boxwrapper">
<div id="headermenu">
<div id="menu">
<a href="art.htm" id="art" target="b"><i>art</i></a>
<a href="doodle.htm" id="store" target="b"><i>store</i></a>
<a href="bio.htm" id="bio" target="b"><i>info</i></a>
<a href="links.htm" id="links" target="b"><i>links</i></a>
<a href="tutorial.htm" id="services" target="b"><i>services</i></a>
</div>
</div>
<div id="column1">
<div id="menu2">
<a href="updates.htm" id="updates" target="b"><i>update</i></a>
</div>
</div>
<div id="column2"> </div>
<div id="footer"> </div>
<iframe height="368" width="480" id="inlineframe"
name="w" frameborder="no" src="source_of_the_page.htm" allowtransparency="true"
border="0" framespacing="0"></iframe>
</div>
</div>
</body></html>
Short for CASCADING STYLE SHEETS. Anyway, we are going to use NOTEPAD again, save the file with an extension .css. We are going to use CSS 2.0. To learn more of CSS, please visit....
OK. Here's the plan again. We were actually trying to position each layers like that by defining their exact x (left) and y (top) positions. Absolute positioning is easy to understand, effective & easy to use.
See image below.
The visual plan on laying the segments.
There are of course other easier ways like just making either 3 columns or 3 rows but we decided to take a unique approach.
We placed the basic formating for the body and the anchors. For the anchors we placed an absolute. This will enable us to position the 'hotspots' later. The rest of the formating are simple.
body {
cursor: default;
font-size:8pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #699;
margin: 15px; }
a {
position: absolute;
text-decoration: none;
cursor: help; }
There are currently 3 'most commonly used' types of positioning, namely :
First the #boxwrapper is to be centered. We gave it a background color of white so we can work on it easily. Now, remember the total design size is 850 pixel in width and around 600 pixel in height. To center the #boxwrapper, first we placed an absolute. Then we place a height the height and width. We also place the left: 50% and margin-left: -425px. What happens here is actually simple. The #boxwrapper is positioned at a left-margin-width of 50% from the total width of the page. Then the 'margin-left' is then added to get the #boxwrapper aligned exactly at the center. The value is set to a negative value of half of the #boxwrapper's width (850px). Works in Firefox 1.5, Opera 8.53 and I.E 6.0.
#boxwrapper {
background-color: #699;
position: absolute;
left: 50%;
margin-left: -425px;
width: 850px;
height: 600px;}
Now we have a white 850 x 600 pixel, nicely aligned box to work on. We can adjust the height size and remove the background color after completing the whole layout.
This useful trick is courtesy from the topic: CSS ZEN GARDEN: ENTOMOLOGY.
Publisher : Peachpit Press
Pub Date : February 17, 2005
The Zen of CSS Design: Visual Enlightenment for the Web
By Dave Shea, Molly E. Holzschlag
POSITIONING THE REST OF THE SEGMENTS. From here onwards its a trial and error and lots of simple calculation or #headermenu, #column1, #column2, #footer and #inlineframe. Alright, the absolute remains unchanged for all segments (contents). To place the image, we use the 'background: transparent url(image_name_here) no-repeat;'.
IMPORTANT NOTE: The location of the CSS file and images used MUST BE IN THE SAME DIRECTORY.
The top is the y axis while the left is the x axis. The width and height must be the same ones as the width and height of the image used. Simple right? So like we said earlier, its a trial and error and lots of simple calculation to positioned the segments (contents). Below are one example of the codes:
#headermenu {
background: transparent url(headermenu.jpg) no-repeat ;
position: absolute;
top: 0px;
left: 0px;
width: 850px;
height: 136px; }
For the #inlineframe. The only difference is there will be no background. See code below:
#inlineframe {
position: absolute;
top: 136px;
left: 358px;
width: 482px;
height: 370px; }
What exactly is a 'hotspot'? It's just another popular term for Image Mapping. Normally, during our earlier years, we would use a nicely cut image and anchor it to link a certain document. This makes the entire image a link for users to click. However here, we are going to create an image map that contains multiple links (hotspots) within a single area (content2). We can also create just one link within a single area (content4). To date, there are two types of image maping:
More information can be gain from the internet (W3C) or from this book:
Publisher : O'Reilly
Pub Date : February, 2006
Web Design in a Nutshell, 3rd Edition
By Jennifer Niederst Robbins
The client-side type is the most commonly used on the net. Image mapping is actually an old technique. We seldom see it nowadays except on afew old webpages.
NOW WE ARE GOING TO WORK ON FAKING A WORKABLE HOTSPOTS. As you now see in segment headermenu, it will now be filled with at least 5 hotspots that will link to other documents. This douments as we know will be targeted inside the IFRAME. Earlier on, in the Formating the Basic Elements, we already placed a 'position: absolute'. Now we worked on making the contents of the layer invisible, that's the reason the 'i' is there. Ok this is how we lay them out, see codes below:
#menu a i { visibility: hidden; }
a#art { top: 97px; left: 38px; width: 48px; height: 26px }
a#doodle{ top: 97px; left: 107px; width: 78px; height: 26px }
a#bio { top: 97px; left: 206px; width: 54px; height: 26px }
a#links { top: 97px; left: 281px; width: 61px; height: 26px }
a#tutorial { top: 97px; left: 363px; width: 99px; height: 26px }
Refering to the codes above. We alternately changed the visiblity from 'hidden' to 'show' so it will be easier for us to work on positioning the maps. The top is the y axis while the left is the x axis. Again here, a trial and error and lots of simple calculation. We adjusted and set the height and width according to what we wanted.
We are aware that the settings of 'font-size' will affect the browser rendering the size (especially the width) of the hotspots, that is why we placed a size 8pt 'font-size' formating earlier in the 'body'.
The same is done for the single 'hotspot' in column1 (the face). See code below:
#menu2 a i { visibility: hidden; }
a#updates { top: 20px; left: 8px; width: 345px; height: 345px }
Finally the whole code is compiled and arranged properly and neatly a shown below. To make comments inside the codes use
/* comments */
/* comments */
body {
cursor: default;
background-color: #699;
margin: 15px; }
#boxwrapper {
background-color: #699;
position: absolute;
left: 50%;
margin-left: -425px;
width: 850px;
height: 582px; }
#headermenu {
background: transparent url(header.jpg) no-repeat ;
position: absolute;
top: 0px;
left: 0px;
width: 850px;
height: 136px; }
#column1 {
background: transparent url(garfu.jpg) no-repeat ;
position: absolute;
top: 136px;
left: 0px;
width: 358px;
height: 370px;}
#column2 {
background: transparent url(006.jpg) no-repeat ;
position: absolute;
top: 136px;
left: 840px;
width: 10px;
height: 370px; }
#footer {
background: transparent url(footer.jpg) no-repeat ;
position: absolute;
top: 506px;
left: 0px;
width: 850px;
height: 77px; }
#inlineframe {
position: absolute;
top: 136px;
left: 358px;
width: 482px;
height: 370px; }
/* formating links here */
a {
position: absolute;
text-decoration: none;
cursor: help;}
#menu a i { visibility: hidden; }
a#art { top: 97px; left: 396px; width: 48px; height: 26px }
a#store { top: 97px; left: 465px; width: 78px; height: 26px }
a#bio { top: 97px; left: 564px; width: 54px; height: 26px }
a#links { top: 97px; left: 639px; width: 61px; height: 26px }
a#services { top: 97px; left: 721px; width: 99px; height: 26px }
#menu2 a i { visibility: hidden; }
a#updates { top: 20px; left: 8px; width: 345px; height: 345px }
ALWAYS CHECK YOUR CODES FOR TYPOS, SEE IF THEY WORK IN OTHER BROWSERS. We checked on afew browsers to see if it's working or not. So far we did some checks on 3 popular browsers like I.E 6.0, Firefox 1.5 and Opera 8.53.
Copyright©2006 OOPSMURAL