Photoshop Tutorials

Type in title with Georgia, additional info with arial and just copy the search form- replace an icon and delete the gradient.

Do you remember how did you made a shape for main menu? Well, try to reproduce it here, but make in flipped vertically and alsospread it on the width of whole content area. Here it is as a black shape for you to see. Ofcourse you should use white color with slight touch of noise.

Step 11 - Footer

Create a new group for footer, but make sure it is under the newsletter so the previously created shape will overlap every element from the footer (I mean- background).

Make a shape of color #333333 that covers whole bottom part of layout and add a bit of sharp gradient on the very bottom. If you don't have a space, or have it too much- use Crop Tool. You can use it both ways- to shrink the document's canvas as well as to extend it. Even if your space is okay- try it. It's a small tricky thing that not everyone knows about, however is pretty useful.

Add some additional navigation:

Next we will add some other elements that should be aligned with this one, but anyway we will recreate it in html/css. If you really want to, use a guide or move tool aligning options. Alright then, add a title for the partnership form and help info. Then add a simple form and the button we created previously for the slider.

Finish the footer with fast contact elements and we're done with main page.

The whole layout looks like this:

Save the document as index.psd or main_page.psd. Doesn't really matter, it's just for you to know what is what. Notice the content part that is outlined with red color. Delete all the layers that are inside (or eventually hide if you don't mind megabytes of RAM taken by mostly unneeded layers; in fact we could make use of some but it's better to just leave those we will need) and save document once again using SAVE AS option. Save it as blank.psd.

Step 12 - Single product's page

Okay, so for now we have something like this. It's our blank document- it's opened. Save it right away as single.psd so we will, after 'saving as', work on single.psd document and blank.psd will stay untouched.

We want to have here an image, description, some unordered lists of functions and a small gallery. I always try to make a draft, even with mouse and brush tool. It's essential to distribute everything so you will have a space for every element. You know- it should be simple but informative. Informative for you.

Here's a tip: If you are wondering how did I created so straight lines with brush tool, get this tool into your 'hands', click anywhere on the document, hold down SHIFT key and then click anywhere else. You see? The line was just created from first click to the second. This feature is very useful for me in planning part. Okay, as we planned, or actually- I planned- place a sample name for the product, create a line (or duplicate it from newsletter set) and use a button to make a hyperlink to the catalog. All the elements here were made previously.

Add a sample image and description. Remember, guides won't tell you how big elements should be. You will tell guides where they has to be. That's wy grid systems are... bad. I didn't wanted to use that word but can't name it other way. Anyhow- they tells you in some way how big your elements should be and where they must be placed. You can't create anything that is unique. Thankfully we are not using any grid system. If you are, unfortunately, using it... Well, maybe try to do something without them and inherit grid system to your projects when you will be ready for it That's mean- when you will know how to design for grid systems without strict grid system. Let's back to the topic: Add your content (that includes all text elements like description, titles and lists) but leave some space for the gallery.

Separate the content from the gallery (it's blank now) with the line copied from newsletter.

Truly I will say that I have made few measurements and make a thumbnails to perfectly fit the blank area. However we can make them bigger or smaller in html- it's just a mock-up above all. Create a white shape and add to it a slight border in blending options. The size of this shape is exactly 100x100 pixels.

Create another one inside it that will be 80x80 pixels. To make exact values use Rectangular marquee tool with style set to Fixed size. If you want to align them- use move tool options.

Copy any sample image to the clipboard. CTRL+Click on the thumbnail of the smaller shape so you will get a selection. Then go to Edit > Paste into and you will have a clipboard image placed iside a mask of selection, like this:

Dupliacte this layer six times and move them along the layout, but make sure that last box touches the last grid. Then pick move tool, select all the boxes' layers in layer window (you should make each box in each group, otherwise it wouldn't work, so actually you should select groups) and then click Distribute Horizontal Centers on the top bar so you will get perfectly aligned boxes:

As you can see I also made some hover state for a thumbnail. I had a bit of space so also copied three boxes one line below. And the layout for single product is done. Save it and close...

Step 13 - Contact page

Save it and close, then open blank.psd once again and use Save As to save it as contact.psd. And again- blank.psd will be untouched and we will work from now on contact.psd document. Contact form that you see below is builded on search form, but a main shape has lowered opacity , and also icon and gradient are deleted. Not a big deal so I won't show you how to make it. In the end we will need a single example to convert everything to html/css. The button is taken from previous steps. Nothing special here, but...

... I would like to describe in this step the map creation. If your client will accept some third-party maps like google-maps addon, then you would not have a lot of work here, but other way you will have to make it AND as a designer you want it to be attractive. In this step I'm going to use a satellite map, however it is best to use handdrawn elements. Above all the map is pretty simple because it is not a tutorial dedicated only for a map so I have limited space. However, with few simple tasks we will convert boring shape to nicely looking layout's element. It's good to start a map creation on the new document. Let's do so.I actually doesn't matter what dimensions you will use, but there should be at least 900 pixels in width. Map is panoramic, so height should be relatively smaller than a width. Let it be your intuition that will choose a correct dimensions. Don't worry if you will create too big map, for some reason there is Scale funcion in photoshop, right? And remember- it's always better to scale something down rather than stretching out. Always, unless you're working with vectors. When you will have a blank document- add vertical guides on 0%, 25%, 50%, 75% and 100% and horizontal on 0% and 100% like here:

Then go to Image > Canvas Size, check the relative box and type 40 in width and height so we will have canvas extended by 20 pixels each side.

Now fill the whole document with white. Then create a rectangular selection within a guides. Copy your map to clipboard and then go to Edit > Paste Into so you will have fastly map inside a mask. If it is needed, use Edit > Transform > Scale to make it fit.

We are going to make a map based on four layers so all the transformations will be super easy. Start with selection showed below, go to Edit > Copy Merged and paste the clipboard into our layout.

Another selection, again- copy merged and paste to the layout.

Yet another, I suppose you already know how the last gonna looks like, but I will show it anyway just in case.

Turn this messy stack of layers

Into an organized stripe:

Make a group of those four layers. Select them in layer's window and hit CTRL+G. After that, select background and then with CONTROL select our newly created group...

... pick up Move Tool (V) and choose Align horizontal centers.

From now on our map should be perfectly centered on the viewport. Now we will make some simple transformations. Select first layer and go to Edit > Transform > Skew. Change the anchor point location and then type negative value into Vertical Skew.

Make the same with second, third and last layer. The stripe should be continuous, so remember to change anchor point and vertical skew accordingly to the situation, like here for second layer:

As you can see anchor point is on a right edge now and a skew has positive value. I have zoomed in image in the corner when two layers met to choose the right value for vertical skew. If the layers has the same dimensions, the value would not change, but here inner layers are smaller than the first and last. Here how it looks like for third and fourth. I hope you would already do that without these reference images.

Now select all four layers (but don't merge them) and go to Edit > Transform > Perspective. Make something like this.

Then go to Edit > Transform > Scale and scale the map vertically so you will get the following:

I have changed colors a bit and used Burn and Dodge tools on the pieces of map to give it a bit of third dimension look. Legend: Red spots idicates burn tool and green- dodge tool. Remember to switch the layers.

Now on we will add even more shadows. You can place the all shadows on one layer. Chenge blending mode to Multiply, pick some dark color and make a selection from first layer, then place some gradients here and there. Replicate this effect with all four layers. Thanks to this we will nicely enchant the edges.

At this moment I have added a bit of smaller effects that you can find out in psd source file. Here's how to make a shadow under the map. Create a selection like this one and fill it with dark color. This layer should be under the map.

Deselect and use Blur tool to achieve something like that. Notice: closer to the corner- less blurred shape.

With Eraser tool smooth the inner edge of the shape.

Replicate this effect to achieve this:

Seems like we're done. Just add a map sign and that's it. Mine is a mix of three effects shown before. Colors and lights from the menu button, skew and blurred shadow. Give it a try before we will go to the cutting part.

Step 14 - Cutting to html

It's good to have some blank html and reset css files in your inventory. It's like an action in photoshop. You don't have to write/copy everything hundreds of times. Just copy reset css and blank html to your project folder and you have a fast start. Here, you can download my blank template as well. Right, let's start to reproduce our main page in html/css. Open up in photoshop our psd file with main page mock-up and hide all the layers except noisy background. Then make a selection, about 200x200 pixels. We don't have to worry too much here because this pattern will be seamless for sure.

Go to Edit > Copy merged, so everything that is under the selection will be copied (in case you have a background on more than one layer) and then go to File > New. As you can see width and height has automatically the values from our copied selection. In new document go to Edit > Paste and then to File > Save As. Save the file as a background.jpg (with maximum quality - 12) in 'graf' folder from my blank template (Or in any other folder, but later on remember to change the paths in my css codes). Don't worry about the images' weights too much for now. Save everything with maximum quality and later on I will show you how to shrink them. Alright, open up index.html in your browser. It's blank. Then open up index.html in some codes editor as well as style.css. Even notepad could be, but of course there are better choices. Update html's style in css by pasting this code into it:

html { font: 12px Arial, Helvetica, sans-serif; text-align: left; background: url(graf/background.jpg); }

Now refresh your page in a browser and see the first effect. By the way, you should have some basics about html because in this tutorial you won't see deep basics about webpage creation. However I will try to explain as much as possible.

Step 15 - Coding Header

Firstly, we will need some html to work on. So let's try to separate all the elements that we have on our mock-up. A repetitive background, a non repetitive background (gradient), logo (image) and a search form. Let's try to add them. Remember to delete the html comments that are inside "" tags.

<div id="wrap_header"><div id="header"><a href="/index.html"><img src="/graf/logo.png" alt="Logo" class="logo" /></a><form action="#" id="searchform" method="get"><fieldset><input type="text" id="searchinput" name="s" value="search form" onblur="if(this.value.length == 0) this.value='search form';" onclick="if(this.value == 'search form') this.value='';" /><input type="submit" class="searchbutton" value="search" /></fieldset></form></div></div>

Now let's cut some images. At first we will need a guide that will separate a header from menu (Select menu shape or whole group so guide should easily stick to).

Hide the layers with gradients so the header's background will be repetitive in x-axis (horizontally). Select few first pixels and like we did with first background image and all next images follow the standard actions: copy merged > New document > Paste > Save As (jpg or png). Save this one as a topbg.jpg.

Now select the whole top WITH gradients and save it as a topgradient.jpg

Here's css for the backgrounds:

body { background: url(graf/topbg.jpg) top center repeat-x; } #wrap_header{ width:100%; margin:0 auto; height:157px; background: url('/graf/togradient.jpg') top center no-repeat; } #header { width:980px; height:157px; margin:0 auto; position:relative; }

The body's background may not be displayed correctly (fully) by now for the body is as long as the header. But when we will add another components like menu and content area- it will be ok. By the way: I actually cut all the images that I will need before I will write any html and css code but herenow we'll make it step by step. Alright, next thing that we will need is a logo. Mine has a dimensions of 296 by 76 pixels and is saved as a png so the background is transparent. There were days when png format has not been supported by web browsers ( I mean IE6 ) but that was ages ago and nowadays every modern browser supports it (even animated png which isn't really popular) so you shouldn't worry about it. By the way: do you know anyone who is using IE6 by now? Just wondering, because I don't. Okay, so we have a logo, here's css for it. Html was added earlier. It was named logo.png. You can use ruler tool so you will know how far it is from top.

#header .logo { position: absolute; left:20px; top:34px; /* distance from top */ display:block; }

Now we will need some background for search form. Hide all unneded layers and select a search form. Your selection don't have to be perfect. Notice that if you will create a new document it will apply dimensions not from the copied selection, but from the boundary of existing pixels. Name it searchbg.png. Remember, we are saving layers that has any transparency as a png. The rest is jpg.

Here, grab this code for the search form and search icon.

#header #searchform { position: absolute; right: 20px; top: 55px; width: 196px; /* width of a background image */ height: 36px; /* height of a background image */ background:url(graf/searchbg.png) top left no-repeat; border:0px; } #header #searchform #searchinput { color: #686767; padding: 8px 5px 4px 8px; width: 150px; background:none; border:0px; } #header #searchform .searchbutton { height: 15px; width: 12px; text-indent: -9000px; text-transform: capitalize; background: url(graf/searchicon.png) no-repeat 0 0; border: none; position: absolute; right: 10px; top:9px; }

As you can see, the real input form is hidden.

Step 16 - Coding Main Menu

Let's start with some div-wrappers in html along with code for menu (unorganised list) and call to action button.

<div id="wrap_menu"><div id="menu"><ul id="mainmenu"><li><a href="/index.html">About</a></li><li><a href="/products.html">Our products</a></li><li><a href="/download.html">Download</a></li><li><a href="/contact.html">Contact</a></li><li><a href="/">Client zone</a></li></ul><a href="#" id="calltoaction">Catalog <span>2011</span></a></div></div>

As you can see, in the a tag (whole button) there is a span tag which we will use to change the font of '2011' from Arial (inherited from html property in css) to Georgia. Ok, so let's go to cut some images out of psd file. We will need a whole menu shape, two backgrounds for menu items and a background for call to action button. I checked in psd that our menu is 49 pixels high- measure distance between two guides. Here are the elements that you have to cut out.

Remember that we wanted to have two states of call to action button? Alright, cut out the background to the new document, but don't save it yet.

Now make a Vibrance layer (or some other adjustment layer) visible, copy merged and paste it into the previously made document (not the new one, but those with button) so you will have two layers there. Now go to Image > Canvas size, check relative checkbox and into a height type the actual height so it will double.

Move one of the layers to the bottom (it should stick to the edge) and now save it as a calltoaction.png.

Thanks to this we will make a css hover effect without an image loading delay. Alright, so the last part is css code. I believe it is self-explained, but I made few comments here and there. I used 'background-size' property (to stretch background) that was introduced in css3, so older browsers wouldn't display our menu correctly. However, we are not supporting backward compatibility. If you wish to, you have to make some hacks (or rather tricks) with stretched images and z-index. Not too hard, but too messy for this tutorial. So I will just stay with background-size which is fully supported by Opera 10+, FireFox 4+, Internet Explorer 9+, Safari 4.1+ and Chrome 3+.

#wrap_menu{ width:100%; margin:0 auto; height:49px; /* height measured in psd file */ } #wrap_menu #menu{ width:980px; margin:0 auto; height:49px; position:relative; } #mainmenu { position: absolute; top:0; left: 20px; list-style: none; height: 49px; width: 741px; /* menu shape's width */ padding-left: 20px; /* so the first element will be pushed from beginning of the shape */ background: url(graf/menubg.png) no-repeat 0 0; /* menu shape */ } #mainmenu li a { float: left; display: inline-block; height: 48px; padding: 15px 12px 2px 12px; /* paddings for text positioning */ background: none; color: #1f1f1f; text-decoration: none; font-size: 16px; margin-right: 16px; /* to make distance between menu elements */ } #mainmenu li:hover a { background: url(graf/menuactive.jpg) no-repeat 0 0; background-size: 100% 48px; /* to stretch the hover background */ -o-background-size: 100% 48px; /* for Opera 9.5 */ -webkit-background-size: 100% 48px; /* for Safari 3 and Chrome 1 */ -khtml-background-size: 100% 48px; /* for Konqueror */ -moz-background-size: 100% 48px; /* for firefox 3.6 */ color:#fff8de; } #calltoaction { position: absolute; top:0; right:20px; width:194px; height:34px; /* 49px minus padding-top value */ background: url(graf/calltoaction.png) no-repeat 0 0; text-align: center; padding-top: 15px; /* to push text vertically from top */ font-size: 16px; color: #fff; text-decoration: none; text-shadow: 0px 1px 1px #b3830c; /* simulation of photoshop's shadow */ } #calltoaction:hover { background: url(graf/calltoaction.png) no-repeat 0 -49px; } #calltoaction span { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: bold; }

Step 17 - Coding Newsletter And Footer

Great, we are pretty far. We will leave a content area for now, because firstly we'll make a blank (well, not really blank, but without a main part) html document (like we did with psd) and then we will build the content for every page. Our newsletter are will have a fixed size. Start from placing the guides on top and bottom (select newsletter gropu in layer's window so they will stick) to cut out the backgrounds.

Now cut out the background for wrapper, save it as newsletterbg.jpg.

Check its height (or distance between guides) so you will know how big will be our newsletter area. In fact we could make it elasttic/fluid, but there is no need to do that. Now hide all the layers (with background) so you will have only an upper line (so called separator) and bottom shape. Cut it out as well. Name it newsletter.png.

Also take care about input background and newsletter icon. Here is a html code to apply.

<div id="wrap_newsletter"><div id="newsletter"><h2>Newsletter</h2><p>Want to know more?<br />Send us your e-mail.</p><form action="#" id="newsletterform" method="get"><fieldset><input type="text" id="newsletterinput" name="n" value="e-mail address" onblur="if(this.value.length == 0) this.value='e-mail address';" onclick="if(this.value == 'e-mail address') this.value='';" /><input type="submit" class="newsletterbutton" value="join" /></fieldset></form></div></div>

And css for it. To fasten the work we will position everything with absolute values.

#wrap_newsletter{ width:100%; margin:0 auto; height:94px; background: url(graf/newsletterbg.jpg) repeat-x 0 0; } #wrap_newsletter #newsletter{ width:980px; margin:0 auto; height:94px; position:relative; background: url(graf/newsletter.png) no-repeat top center; } #newsletter h1 { position: absolute; top: 21px; left: 20px; } #newsletter p { position: absolute; top: 21px; left: 179px; color: #737372; } #newsletter #newsletterform { position: absolute; left: 335px; top: 17px; width: 196px; height: 36px; background:url(graf/newsletterform.png) top left no-repeat; border:0px; } #newsletter #newsletterform #newsletterinput { color: #686767; padding: 10px 5px 4px 8px; width: 150px; background:none; border:0px; } #newsletter #newsletterform .newsletterbutton { height: 13px; width: 13px; text-indent: -9000px; text-transform: capitalize; background: url(graf/newslettericon.png) no-repeat 0 0; border: none; position: absolute; right: 10px; top:12px; }

And the newsletter is complete. Let's head to the footer. We will need one image here for background and one for button (with its hover state). I resign at this moment from the contact form in the footer for we will create one in Contact page. However we will cut out the button now. Ok, cut the bottom part of gradient (name it footerbg.jpg) and create a button the same way that we have made call-to-action button (name it darkbutton.png).

Here is html for the footer:

<div id="wrap_footer"><div id="footer"><div id="block1"><ul><li><a href="/index.html">About us</a></li><li><a href="/products.html">Our products</a></li><li><a href="/download.html">Download</a></li><li><a href="/contact.html">Contact</a></li><li><a href="#">Client zone</a></li><li><a href="http://maciejkwas.pl"><b>Catalog 2011</b></a></li><li></li><li><a href="http://photoshoptutorials.ws">Our certficates</a></li><li><a href="http://prowseed.com">Privacy policy</a></li><li><a href="http://maciejkwas.pl">Terms of service</a></li><li><a href="http://maciejkwas.pl">Sitemap</a></li></ul></div><div id="block2"><h2>We are looking for business partners</h2><p>Some sample text</p></div><div id="block3"><h2>Help centre</h2><p><span>+48</span> 792 000 111</p><p>%MINIFYHTMLaa87bd8d4944a20a5c20df19cb4135da21%%MINIFYHTMLaa87bd8d4944a20a5c20df19cb4135da22%This e-mail address is being protected from spambots. You need JavaScript enabled to view it%MINIFYHTMLaa87bd8d4944a20a5c20df19cb4135da23%</p><h2>Copyrights</h2><p>© 2011 - JAROOM Refrigeration LLC.<br /> Design by <a href="http://prowseed.com">Maciej Kwas</a> for <a href="http://photoshoptutorials.ws">pstutorials.ws</a></p></div><br class="clear" /></div></div>

And complete css with some comments. As you can see I made three main blocks that stands for the columns. It is simpliest way I know to create such columns, but what's most important- it works well. With this techniqe you can make two columns as well as ten. As you can see all are floated to the left with fixed width value, so they stands next to each other.

#wrap_footer{ width:100%; margin: 0 auto; background: #333333 url('graf/footerbg.jpg') bottom center repeat-x; } #wrap_footer #footer{ width:980px; margin:0 auto; position:relative; overflow: hidden; background: url('/graf/sketch.png') 330px 100px no-repeat; } #footer h1 { color:#fd7700; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: 0; text-shadow: 1px 1px 1px #000; } #footer #block1 ul { font: 11px/20px Arial, Helvetica, sans-serif; color:#b2b2b2; letter-spacing:0.02em; } #footer #block1 ul li { list-style-type: none; font: 12px/24px Arial, Helvetica, sans-serif; } #footer #block1 ul li a { color:#b2b2b2; text-decoration:none; padding: 0 25px; } #footer #block1 ul li a:hover { text-decoration:none; color: white; background: #1e1e1e; border: 5px solid #1e1e1e; -webkit-border-radius: 4px; /* Safari and Chrome */ -khtml-border-radius: 4px; /* Konqueror */ -moz-border-radius: 4px; /* Firefox */ border-radius: 4px; padding: 0 20px; } #footer #block2 p { color: #727272; margin-top: 20px; margin-bottom: 30px; text-align: justify; line-height: 22px; } #footer #block3 #help { position: relative; margin-top: 20px; } #footer #block3 #help span { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; } #footer #block3 #help .help_phone { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #c1c1c1; position: absolute; top: 25px; left: 90px; } #footer #block3 #help #circle { color: #050505; width: 78px; height: 78px; background-color: #454545; border-radius: 39px; -moz-border-radius: 39px; -webkit-border-radius: 39px; display: table-cell; text-align: center; vertical-align: middle; } #footer #block3 p { color: #727272; } #footer #block3 a { color:#b2b2b2; text-decoration: none; } #footer #block3 a:hover { text-decoration: underline; } #block1 { margin: 64px 0 30px 20px; float: left; width: 215px; } #block2 { margin: 64px 0 30px 0; float: left; width: 400px; } #block3 { margin: 64px 0 30px 50px; float: left; width: 270px; } .margintop10 { margin-top: 10px; } .margintop20 { margin-top: 20px; } .margintop30 { margin-top: 30px; }

At this moment you should get something like this and that would stand for our blank html template. Or maybe not really...

Step 18 - Coding Client Zone

Instead of making new page for login panel, we will get advantage of jquery (that is already implemented into our code) and will create a fixed div that will be hidden by default. Let's make some design at first. The form will slide from the top. It's position will be fixed and it will be stretched on 100% width of page and shouldn't be longer that the header so the user will have possibility to hide it with menu item. I kept my design simple. It's just to show off above all. Check the sources for more informations. In psd file you will find mock-up of the form, in graf folder two background images that I used here. If you wish, you can prepare your very own, more complex backgrounds. Ok, this is the html. Place it anywhere in the body tag.

<div id="wrap_login"><div id="login"><form action="#" id="loginform" method="post"><fieldset><input type="text" id="logininput" name="login" value="login" /><input type="password" id="passwordinput" name="password" value="login" /><input type="submit" class="loginbutton" value="sign in" /></fieldset></form><a href="#">Forgot Password?</a><a href="#">Create a New Account</a><a href="/" class="loginscroll">Close this panel</a></div></div>

And here's css for that piece of html:

#wrap_login{ width:100%; margin:0 auto; height:140px; background: url(graf/loginbg.png) repeat-x 0 0; position: fixed; top:0; z-index:9999; } #wrap_login #login{ width:980px; margin:0 auto; height:140px; position:relative; background: url(graf/login.png) no-repeat top center; } #login #loginform { padding: 24px 0 44px 40px; width: 600px; position: relative; height: 36px; } #login #loginform .logininput { color: #686767; line-height: 36px; padding: 0 10px; position: relative; width: 176px; height: 36px; background:url(graf/newsletterform.png) top left no-repeat; border:0px; } #login #loginform .loginbutton { color: white; line-height: 37px; width: 143px; border:0px; position: relative; height: 37px; background:url(graf/darkbutton.png) top left no-repeat; margin-left: 20px; } #login #loginform .loginbutton:hover { color: black; background: url('/graf/darkbutton.png') 0 -37px no-repeat; } #login a { margin-left: 40px; text-decoration: none; color: #333; } #login a:hover { text-decoration: underline; }

Don't forget about javascript. Place it inside head tag in your document:

%MINIFYHTMLaa87bd8d4944a20a5c20df19cb4135da24%

And it's done. Now we can name it blank.html and make few copies of it for further pages. There won't be any additional cutting (well, maybe just a few elements actually), so the only part here is proper html and css. Download mine html sources to see it all. Hope you learned something with this tutorial and let me know if you wish to see more of that kind. See you around! Oh, I almost forgot to admit: To shrink the jpg files use IrfanView. Just open up a jpg file in this image browser and save it with 90% quality. Your image shouldn't loose a lot of quality, but it's weight could lower twice time or so. Alright, that would be all for now. Remember, when you learn html and css it is most important to analyze, analyze, analyze... Edit already created file, change some value, save, refresh and check out what's happened. It is the best way to learn.

Final Results

Download the Source File

JA Room.zip | 0.53 MB
Download from Website

Authors Comment

Share your Feedback