pootato.org » Tutorials http://pootato.org Tutorials for your website Mon, 26 May 2008 19:56:42 +0000 http://wordpress.org/?v=2.2.2 en Coding a layout http://pootato.org/tutorials/html/coding-a-layout/ http://pootato.org/tutorials/html/coding-a-layout/#comments Wed, 22 Aug 2007 19:42:31 +0000 Clara http://pootato.org/tutorials/html/coding-a-layout/ Edit: Added display: inline; to #text and #sidebar because of IE6 bugs.

You reached the coding part of the tutorial. The first part is here, it explains how to make this simple layout in Photoshop. We're going to code the simple layout we made here. First, let's prepare our HTML file. Put all the codes we'll need first. Between <head> and </head>, don't forget to link the HTML file to style.css that we will create afterwards:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

(more…)

Share This

]]> http://pootato.org/tutorials/html/coding-a-layout/feed/ Making a simple layout http://pootato.org/tutorials/photoshop/making-a-simple-layout/ http://pootato.org/tutorials/photoshop/making-a-simple-layout/#comments Wed, 22 Aug 2007 13:41:16 +0000 Clara http://pootato.org/tutorials/photoshop/making-a-simple-layout/ The old tutorial is really out of date and the layout was ugly so here is a new one, to make a simple and minimalist layout. Open a new file. 800*600px is enough, if you need a wider layout, choose the width you need. Let's fill it with a solid color. Click on Create new fill layer New fill layer button in the Layers window and select "Solid Color".

xCreate a new layer New layer button and make a big selection with the selection tool x, for example, 750*600px. And fill it with white. We have this so far.

xNow, double click on your white layer to go to the Layer Style. We're going to add some drop shadow, check "Drop Shadow". I set the distance to 0, and the size to 8px. (View settings)

(more…)

Share This

]]> http://pootato.org/tutorials/photoshop/making-a-simple-layout/feed/ CSS Progress Bar http://pootato.org/tutorials/css/css-progress-bar/ http://pootato.org/tutorials/css/css-progress-bar/#comments Tue, 21 Aug 2007 13:58:19 +0000 Clara http://pootato.org/tutorials/css/css-progress-bar/ This is a CSS trick originally from Man Bytes Hollywood article "Track your progress (or Lack thereof)".

Step 1: prepare your images

Your image must be an horizontally repeating background. Of course, you can choose to use no image at all and only a solid color. Too lazy to make a background? I've prepared two for you:

Blue progress bar background Pink progress bar background

Step 2: the HTML code

This is very simple, we use two divs, one to make the border, it will have a fixed width, and one inside, to display the progress. To change the progress, change its width! :)

<div class="prog-border">
<div class="prog-bar" style="width: x%;">
</div>
</div>

Step 3: styling all this

Now, the most important, the CSS! In your stylesheet, add this:

.prog-border {
width: 200px;
height: 20px;
background: #FFF;
padding: 3px;
border: 1px solid #DDD;
}
.prog-bar {
height: 20px;
background: url(progress_bar_background.gif) repeat-x; /* use the color or the background you want! */
}

We're done! You should have this:

Share This

]]> http://pootato.org/tutorials/css/css-progress-bar/feed/ CSS Rollovers http://pootato.org/tutorials/css/css-rollovers/ http://pootato.org/tutorials/css/css-rollovers/#comments Mon, 20 Aug 2007 14:31:08 +0000 Clara http://pootato.org/tutorials/css/css-rollovers/ This is the little trick I use to make my menus rollovers. To start, let's make a simple rollover. See it in action on this page. Note that we use only one image to make the rollover. You just need to put the second image below the first one in your graphic editor and save. Let's insert the HTML codes first:

<a href="http://domain.com" class="rollover"><var>Rollover</var></a>

Do not forget to add a class and to insert the link text between <var> and </var> ! Then, the css:

var {
visibility: hidden; /* this will hide the text link */
}
a.rollover {
display: block; /* needed to set link dimensions */
width: 180px; /* width of your image */
height: 50px; /* height of your image, divided by two, we need to hide the second image */
background: url(IMAGE.JPG) no-repeat; /* image url */
text-decoration: none; /* to hide the link underline */
}
a:hover.rollover {
background: url(IMAGE.jpg) no-repeat 0px -50px; /* On mouseover, we show the second image, by adjusting background position! */
}

GridAs you can see, I've added some values to a:hover.rollover: 0px -50px this is the background-position property. It's like the image "coordinates". The image dimension is 180px*100px but it is equally divided in two parts. When the mouse is not over, we need to show the top image, we do not set the background position because default values are 0px 0px, which is the top image "coordinates". When the mouse is over, we need to show the second image and as you can see on the grid, its "coordinates" are 0px -50px ! :) Okay, I suck at explaining. XD

Let's do something more complex, like an entire menu. This is the HTML code of our menu, I've put the links in a div:

<div id="menu">
<a href="linkone.html" class="one"><var>one</var></a>
<a href="linktwo.html" class="two"><var>two</var></a>
<a href="linkthree.html" class="three"><var>three</var></a>
<a href="linkfour.html" class="four"><var>four</var></a>
</div>

Note that the links classes are all different, this is necessary! This is the image we'll use:

Menu rollover

Let's see it in a grid so that we can set the background-position easily for each link:

Menu rollover grid

Alright, CSS time! First, let's style our menu div. Set its dimension to 400*50px:

#menu {
width: 400px;
height: 50px;
}

Now, hide the text link:

var {
visibility: hidden;
}

And for all links, hide the underline, set their height to 50px, and we'll need to add the float property, to align them correctly (because we "transformed them into blocks" to set their dimensions with display:block;):

#menu a {
text-decoration: none;
display: block;
float: left;
height: 50px;
}

Now, let's add styles for each link using classes:

a.one {
width: 100px;
background: url(image.jpg) no-repeat 0px 0px;
}
a.two {
width: 100px;
background: url(image.jpg) no-repeat -100px 0px;
}
a.three {
width: 100px;
background: url(image.jpg) no-repeat -200px 0px;
}
a.four {
width: 100px;
background: url(image.jpg) no-repeat -300px 0px;
}

Note that background position is different for each class, since we need to display different parts of the image. See the grid. For example, link four image starts at 300px from the left, but in the CSS, we need to add minus 300px.

Now let's set the background-position when someone mouse over the links. We'll keep the "x" position but change the "y" ones, by adding -50px to display the second image (green).

a:hover.one {
background: url(image.jpg) no-repeat 0px -50px;
}
a:hover.two {
background: url(image.jpg) no-repeat -100px -50px;
}
a:hover.three {
background: url(image.jpg) no-repeat -200px -50px;
}
a:hover.four {
background: url(image.jpg) no-repeat -300px -50px;
}

We're done! You can see the rollover in action on this page.

Note: There is a file embedded within this post, please visit this post to download the file.

Share This

]]> http://pootato.org/tutorials/css/css-rollovers/feed/ Fading drop shadows http://pootato.org/tutorials/photoshop/fading-drop-shadows/ http://pootato.org/tutorials/photoshop/fading-drop-shadows/#comments Sun, 19 Aug 2007 17:56:46 +0000 Clara http://pootato.org/tutorials/photoshop/fading-drop-shadows/ xxThis tutorial will explain you how to make drop shadows on some part of your image only. For example, I have my blank background and an other layer on it, white too. (I've put a light grey border so that you can see it.) Duplicate this layer and put it below the original one.

xDouble click on the layer copy to go to the layer style. Add some drop shadow (check "Drop Shadow") and modify the settings so that it looks good. I set the distance to 0 on mine.

xDouble click on the layer copy to go to the layer style. Add some drop shadow (check "Drop Shadow") and modify the settings so that it looks good. I set the distance to 0 on mine.

xxPress Ctrl + T to free transform it. Drag the corners as you like, while pressing Ctrl.

xHere is the result :)

Share This

]]> http://pootato.org/tutorials/photoshop/fading-drop-shadows/feed/ Make a paper clip http://pootato.org/tutorials/photoshop/make-a-paper-clip/ http://pootato.org/tutorials/photoshop/make-a-paper-clip/#comments Sun, 19 Aug 2007 17:39:11 +0000 Clara http://pootato.org/tutorials/photoshop/make-a-paper-clip/ x x Here is a quick way to create an almost realistic paper clip! :) First, you need the paper clip shape that is included with Photoshop. If you don't have it, download it from here. Select the custom shape tool x (U) and choose the paper clip shape. Press shift while dragging, so that the proportions of your paper clip are correct.

x Now, double click on your shape layer to go to the layer style and check "Bevel and Emboss". I've highlighted the setting to change on this screenshot. That is to say, the depth, the gloss contour, the opacity of highlight mode and the color and blending mode of shadow mode. Note that you should adjust the depth to the size of your paper clip!

x Let's add some little drop shadow to it. Still in the layer style, check "Drop shadow". I set the distance to 0, and the size to 1, and the opacity to 50%.

x x Here are other example of clips and how to use them :) You have to delete the "inner" parts of it. (See image on the right) Remember that the setting depends of the size of the clip, so you may not get the same results as me if you apply my settings!

Share This

]]> http://pootato.org/tutorials/photoshop/make-a-paper-clip/feed/ Layout preview http://pootato.org/tutorials/php/layout-preview/ http://pootato.org/tutorials/php/layout-preview/#comments Sat, 18 Aug 2007 10:55:06 +0000 Clara http://pootato.org/tutorials/php/layout-preview/ Ever wondered how I did the preview thing for my designs page? You'll need to do 3 pages:
- A page with your logo (keep it small),
- The page that will merge the 2 other pages,
- The page(s) with the layout preview, or anything else you want to use this script for.

Let's make the first page, with your logo. I'll use mine in the example:

x

And here we go with the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>YOUR TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false" />
<style type="text/css">
body { background-color: #E4EDF4; background-repeat: no-repeat; margin: 0px; padding: 0px;}
</style>
</head>
<body>
<img src="LOGO-URL" alt="" border="0" />
</body>
</html>

Save this page as header.php

Now, let's make the page that will merge the 2 others, this is where the php makes its entry. We're going to use frames.

<?
$siteurl = "http://your-domain.com";
if ($url) {
$sitedir = "http://your-domain.com/layout/directory/$url";
// Don't delete $url !!!
}
else {
header("Location: $siteurl");
}
?>
<html>
<head>
<title>YOUR TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false" />
</head>
<frameset frameborder="0" rows="LOGO IMAGE HEIGHT (a number),*">
<frame src="http://your-domain.com/header.php" scrolling="no">
<frame src="<?php echo $sitedir; ?>">
<noframes>
<body>
Viewing this page requires a browser capable of displaying frames.
</body>
</noframes>
</frameset>
</html>

Save this as view.php and voila!

Now what's left is to create your layout directory (put its url in $sitedir). Inside that folder, create a new folder for each layout (no space!), for example:
-/layout001/
-/image.jpg
-/index.html
-/layout002/
-/image.jpg
-/index.html

Your layout page must be named index.html or .htm!

To make a link to the final preview page, do this:

<a href="http://your-domain.com/view.php?url=layout001">Preview Layout 001</a>

Hope it works!

Share This

]]> http://pootato.org/tutorials/php/layout-preview/feed/ Slicing a layout http://pootato.org/tutorials/photoshop/slicing-a-layout/ http://pootato.org/tutorials/photoshop/slicing-a-layout/#comments Sat, 18 Aug 2007 10:39:06 +0000 Clara http://pootato.org/tutorials/photoshop/slicing-a-layout/ You've probably read the first part of this tutorial. Now that you have your design, you will have to save it and slice it, right?

xYou will have to show the rulers. Go to [ View > Rulers ] (Ctrl + R)

x xTake the move tool (V) x click on the top ruler and drag the guide to your layout. In the screenshot, the guide is the red line. It's red there, but it can be blue, green or whatever in your Photoshop, depending on your configuration. Well, repeat this step and divide your layout. (See the second screenshot)

Here is a little explanation for the numbers:

  • 01 to 06: layout images.
  • 07: this is where your contents will be.
  • 08: this is your menu
  • 09 to 12: layout images.
  • 13 to 16: this is the background, in fact, I will merge all these into one picture.

You may have noticed it, I haven't numbered some cells at the right. It's because I will merge them.

xWell, now, take the slice tool (K) x and click on "slices from guides".

x x xYou will have to edit those slices. Take the Slice select tool x. You will have to delete the following slices: #17, #18, #19, #20. (See second screenshot animation.) Then, click on slice #16 and enlarge it. (See third screenshot.)

x xOkay, it's ready to be saved. Go to [ File > Save for Web ] (Alt + Shift + Ctrl + S). A window will pop up. Select the entire layout.

xPut those settings…(click the screenshot to enlarge).

xClick on the blue arrow x and select Edit Output Settings. Another window will pop up. There's a drop down menu and it's written "HTML", I will skip this, click on it and select "Saving Files". If you know how to use it, feel free to set it up yourself but I advise you to do it like that:

Then, press OK and in the previous window, press SAVE. A window will pop up, choose the directory where you want to save your files and press SAVE.

xOokaay! Now, check in your directory, the files should be there! ;) You can delete the HTML page generated by Photoshop. Here is what your folder should look like:

x x xUnfortunately, it's not over, that's the problem when we use patterns… We have to "fix" some graphics. Open 08.jpg. Take the move tool (V) x again and make guides. Take the slice tool (K) x and click on "slices from guides".

xReturn to [ File > Save for Web ] (Alt + Shift + Ctrl + S). Do the same thing as before, but in the Saving Files settings, put the same values as the screenshot.

Save it in your images directory. You should now have a.jpg, b.jpg, … i.jpg! You can delete 08.jpg or keep it.

xNow, open 16.jpg. It's the background, it will repeat, if you want it to show up correctly, take the selection tool (M) x and select a part as below.

xGo to [ Image > Crop ] and save (Ctrl + S).

x xOpen 04.jpg, take the selection tool (M) x and select it like me. Go to [ Image > Crop ] Go to [ File > Save as ] (Shift + Ctrl + S) and save it as 05.jpg, replace the current one.

x xOpen 14.jpg, take the selection tool (M) x and select it like me. Go to [ Image > Crop ] Go to [ File > Save as ] (Shift + Ctrl + S) and save it as 15.jpg, replace the current one.

God, it's finally over! :D Now, you can read the next part about coding! :)

(attn) I have removed that next part because it's really out of date, sorry!

Share This

]]> http://pootato.org/tutorials/photoshop/slicing-a-layout/feed/ Making a layout (obsolete) http://pootato.org/tutorials/photoshop/making-a-layout/ http://pootato.org/tutorials/photoshop/making-a-layout/#comments Sat, 18 Aug 2007 10:15:17 +0000 Clara http://pootato.org/tutorials/photoshop/making-a-layout/ (attn) This tutorial is old! Totally out of date. Check new version.

This is the first part of the tutorial, the designing part. I divided this tutorial into 3 parts: designing, slicing and saving and coding (coding part is too out of date). Of course, reading this doesn't mean you will be able to make a gorgeous layout! [ Besides, the layout we're making isn't that…pretty. :( ] It's just some methods, tips and organization. :) Well, you can click on some thumbnails to enlarge them and see some notes.

(more…)

Share This

]]> http://pootato.org/tutorials/photoshop/making-a-layout/feed/ Make a flower http://pootato.org/tutorials/photoshop/make-a-flower/ http://pootato.org/tutorials/photoshop/make-a-flower/#comments Sat, 18 Aug 2007 10:10:07 +0000 Clara http://pootato.org/tutorials/photoshop/make-a-flower/ xMake a new document (Ctrl + N) and fill x it with a gradient. Take care: the white should always be below the other layer.

Créez un nouveau document (Ctrl + N) et remplissez-le x d'un dégradé mais faîtes attention: le blanc doit être en bas.

xGo to [ Filter > Distort > Wave ] set the number of generators to 10 and the type to Square.

Allez à [ Filtre > Déformation > Onde ] mettez 10 pour les générateurs et choisissez la forme Rectangulaire.

xGo to [ Filter > Distort > Polar Coordinates ] and set it to Rectangular to polar.

Allez à [ Filtre > Déformation > Coordonnées Polaires ] et choisissez Rectangulaire en polaire.

xGo to [ Filter > Distort > Twirl ] and set the angle to 75°.

Allez à [ Filtre > Déformation > Tourbillon ] et mettez un angle de 75°.

xDuplicate the layer, go to [ Layer > Duplicate Layer ] or press Ctrl + J. Go to [ Filter > Distort > Twirl ] and this time, set the angle to -150°. (The opposite of the previous angle, x2. Example, if your previous angle was 50°, this time, the angle should be -100°.)

Dupliquez le calque, allez à [ Calque > Dupliquer le calque ] ou appuyez Ctrl + J. Allez à [ Filtre > Déformation > Tourbillon ] et cette fois, choisissez un anglais de -150°. (L'opposé de l'angle précédent multiplié par 2. Par exemple, si votre angle précédent était 50°, cette fois, ça devrait être -100°.)

xSet the blending mode to Multiply.

Changez le mode de fusion à Produit.

xHere is the result! Have fun!

Voilà! Amusez-vous bien!

Share This

]]> http://pootato.org/tutorials/photoshop/make-a-flower/feed/