Designers Chair

Facebook picture tagging system

Designers Chair — Mon, 09 Mar 2009 07:59:28 +0000

Create Facebook-like picture tagging system using only CSS.

Facebook might look minimalistic on the outside but it’s a beast from the inside. I don’t know how they did their “cross over a person to see his name” tagging system but i’m going to show you how to fake it. Who knows, maybe they use the same technique (yeah right).

Step 1

First let’s create index.html and folders style and images. Inside of style folder put your CSS file (name it style.css) and put your image inside off images folder. I will use this picture named foto.jpg.

Open index.html and write down the basic HTML code.



Facebook picture tagging system | Designers-Chair.com

We are going to use HTML tags dl and dd so if you aren’t familiar with them i recommend you google it up.

Step 2

Add the following code to the body of your HTML file.

...

Jane Doe
Lucy Liu
Jack Bauer
John Smith

...

OK, that’s it for our index.html file. It’s all CSS from now on. Just to explain few things first. The

tag defines a definition list. In our case that’s heads.

...

tag describes the item in the list. In our case items are people on the photo.

Jane Doe

JaneDoe is the name of the identificator and Jane Doe is the name of the person that will be displayed. Don’t mix those two! Under href=”link” you can put the actual URL of that persons web page. If not put “#” instead.

Step 3

Now CSS. Open style.css and let’s get started. Set the font to 11px Tahoma and background color to white.

body{
	font-family: Tahoma;
	font-size: 11px;
	background-color: #FFFFFF;
}

Remember that heads ID in our HTML file? Let’s define it.

dl#heads{
	background: url(../images/foto.jpg);
	height: 353px;
	width: 530px;
	position: relative;
}

Under width and height put the dimensions of your photo. Now we need to define basic properties for our

tag. Just some position definitions and that’s it.

dd{
margin: 0;
padding: 0;
position: absolute;
}

Next we “describe” the item (person) in the list. I will show you how to do this for one person (in this case the guy on the left, let’s call him “John Smith”) and then you can apply the same procedure for the others.

I hope you have IrfanView, if you don’t i recommend you install it. This can be done without it but it takes longer. Look at the following photo.

You need to find exact location of X and for that i will use IrfanView. Open the foto using IrfanView and select the head of a person like you select multiple icons on desktop. Click on the upper right side of persons head and drag down while holding down the left mouse button. When his head is selected read the following values.

This may look confusing but it’s actually really simple. Now let’s input the location of X. IrfanView first displays “left” value and then “top” value.

dd#JohnSmith{
left: 5px;
top: 5px;
}

Now the size of the box :

dd#JohnSmith a{
position: absolute;
width: 128px;
height: 132px;
text-decoration: none;  /*no underline*/
}

If you refresh your HTML file now you will see that the name “John Smith” id displayed under John’s head. We don’t need that so let’s just hide it.

dd#JohnSmith a span{
display: none;
}

That’s it, the text is gone. We need it to display when we move cursor over the invisible box (persons head) so we will use hover function for that.

dd#JohnSmith a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 53px;
}

Don’t worry, we are finished. Just to explain the last part.

We set the font color to white (color: #FFFFFF), bold it (font-weight: bold), put it on grey background (background-color: #282828).

IE 6 fix

IE sucks, right? So we need to add this to our CSS to make it work.

dd#JohnSmith a:hover{
background: no-repeat;
}

That’s it! Hope you have enjoyed this tutorial, leave a comment if you did!

Artistic black and white photos

Designers Chair — Sat, 07 Mar 2009 13:56:28 +0000

Create artistic looking black and white photos using any version of Photoshop. Short procedure with great outcome!

Black and white photos sometimes look better than the colored ones. Converting colored photos to black and white is simple but there are few tricks that i’m going to show you to make them even better.

Black and white photo - before and after

The easiest way to convert your photo to black and white is to go Image > Mode > Grayscale. This is the result :

Not so good isn’t it? This is because it’s plain color -> black and white conversion so of course it looks bad. Instead of that use the following metod.

Step 1

Open your colored photo, press CRTL+U or go Image >Adjustments – Hue/Saturation and reduce saturation to -100.

Step 2

Duplicate the layer and name it “copy”. Now you have two black and white layers. Select the top one from the menu on the right and go Image > Adjustments > Brightness/Contrast. Use the following settings :

Step 3

Set Blend Mode to Overlay.

I’m happy with the result so i will leave it like that. Following steps are optional.

Step 4

All photographs are different so this settings may not be perfect for your photo. Go Image > Adjustments > Curves and play around with the curve.

Step 5

If you think that your photo is too sharp or just want to add more “dreamy” effect use Gaussian Blur. Go Filter > Blur > Gaussian Blur and put the radius to 2px.

That’s it. Now you have a much better looking black and white photo.

CSS Image Transparency

Designers Chair — Tue, 03 Mar 2009 17:01:50 +0000

Learn how to change image transparency (opacity) using only CSS code. Simple but useful technique that you can use to create nice looking gallery or just crossover effect.

Here is how it looks like…

Changing image opacity (transparency) using css :

Image opacity wih different crossover effect (move your cursor over it) :

So let’s get started. First create a new HTML document (index.html), create folder “style” and inside it create our CSS file (style.css).

Our basic HTML file looks like this :



	CSS Image Transparency | Designers-Chair.com

Tag title defines page name :

CSS Image Transparency | Designers-Chair.com

This is the path to our external CSS file :

Body is empty so nothing will be displayed when we open our HTML file in web browser. Now we are going to display our picture.

...



...

Now we see the picture but there is no transparency. Open style.css and add the following code :

img
{
	opacity:0.5;
	filter:alpha(opacity=50);
}

Notice how we have two same properties for img tag. This is because Internet Explorer uses filter:alpha(opacity:x) function (x = 0-100), but Firefox and Crome use opacity:x (x = 0-1). 0 = invisible, 1/100 = 100% visible.

Crossover effect is now easy to do. We just need to add onmouseover and onmouseout.

...

...

You can also use hover function (instead of onmouseover, onmouseout) , just add it to style.css. Note that this technique does not work with IE 6 (:hover is supported only on elements).

img
{
	opacity:0.5;               /*Firefox & Chrome*/
	filter:alpha(opacity=50);   /* IE */

}

img:hover
{
	opacity:1;               /*Firefox & Chrome*/
	filter:alpha(opacity=100);   /* IE */
}

That’s it! Simple but very useful and attractive.

Design studio web page

Designers Chair — Thu, 26 Feb 2009 11:38:57 +0000

Learn how to make professional looking design studio web page layout. Step by step tutorial, easy to follow…

In this tutorial we are going to design this web page layout :

Don’t worry, it’s not so complicated as it looks. I’ve uploaded original PSD file so you can download it (at the bottom of the page). It will work for Photoshop 7 and above.

Let’s get started!

01. Step
Before we get to work we need to decide how are web page is gonna look. So here is the basic concept :

It will be 850px in width.

02. Step
Create a new document, size 1024×1080, add a new layer (CRTL+SHIFT+N) named “background” , fill it with any color and under Gradient Overlay in Blending Options apply the following settings :

Color Midpoint must be closer to the right Color Stop!

03. Step
Create a new set and name it “header”. From now we will work in this “folder”.

Using Rounded Rectangle Tool (radius : 5px) draw header. It should be 850×200 px, about 30px from the top. Rasterize it, reduce opacity to 65% and apply these blending options :

Name it “header”.

04. Step
Create a new layer (still in “header” set) and name it “ref” (short for reflection). Select Elliptical Marquee Tool, click on point 1 and drag it to point 2 :

Fill that selection with #FFFFFF, then press CRTL+D to deselect it. Click once on the layer “header” on the right side (layer box) while holding CTRL. Layer “header” should be selected now. Press SHIFT+CRTL+I or go Select > Inverse to inverse selection. Select layer “ref” (just click once on it in the right menu) and press delete on your keyboard. Now reduce opacity to 6%.

Your header should now look like this :

Add your logo on the left (i used Sun 1 shape from Custom Shape Tool), write web site name next to it (i used Verdana – 18pt) and under it short description (Verdana – 11pt). Logo and site name have Outer Glow on them (color : #FBB1FF).

05. Step
Layer set “header” is now finished. Create a new layer set and name it “hor_menu”.
Using Rounded Rectangle Tool (radius : 5px) draw horizontal menu. It should be 850×35 px, about 20px under the header. Rasterize it, reduce opacity to 50% (name it “horizontal”) and apply these blending options :

It should look like this :

Now click on the layer “horizontal” (in the right menu) while holding CTRL to load selection.

Using Rectangular Marquee Tool deselect the lower half of that selection (hold ALT key). Create a new layer, name it “ref” and fill that selection with #FFFFFF. Reduce opacity to 6%.

Using Visitor TT2 font write the categories of your web page on it (still in “hor_menu” layer set). Size 16pt.

06. Step
Now we are going to add some effect to the right. I used free stock picture (credit : sweetaslemons). Click here to open it and then save it on your hard drive. This effect looks cool and is actually really easy to make. It was created using an application called Apophysis. I will do a special tutorial on how to make effect like that so be sure to check back in a few days.

Import that effect (JPG file) into your project, set blend mode to Lighten and position it right. Layer “effect” needs to be under layer set “header” and “hor_menu”.

Copy layer “effect01″ and move it above “hor_menu” layer set. Make the following selection and then press delete (layer “effect01_copy” must be selected).

Now it looks like the effect is coming under the “header” and above “hor_menu”. Next, make following selection using Rectangular Marquee Tool and delete that selection on layers “effect01″ and “effect01_copy”.

07. Step
Create a new layer set and name it body. Using Rounded Rectangle Tool (radius : 5px) draw the body. It should be 600×620 px, about 30px under the horizontal menu. Rasterize it, fill it with #000000, set blend mode to Lighten and under Blending Options make Stroke 1px #595C5F.

On the top we will put some kind of AJAX image rotator that will display best artwork with short description. So using Rounded Rectangle Tool (radius : 5px) draw the shape of the rotator. It should be 565×265. Put some image inside and a short description just for example.

Under it using Rounded Rectangle Tool (radius : 5px) draw shape similar to the one below, fill it with any color and apply the following Gradient settings under Blending Mode :

Name that layer “gray_bar”. Create reflection for it like you did for horizontal menu, add some text and the body is finished. You can add text container using Rectangular Marquee Tool. Fill it with #323335 and stroke #87888A 1px.

08. Step
Now create a new layer set and name it “right_column”. Using Rounded Rectangle Tool (radius : 5px) draw the right column. It should be 240×620 px, about 30px under the horizontal menu. Rasterize it, fill it with #000000, set blend mode to Lighten and under Blending Options make Stroke 1px #595C5F.

Copy the “gray bar” from the body layer set, write “Random artwork” on it (Visitor TT2 16pt). There you can put thumbnails of your pictures.

Add “Poll” and the “Archive” the same way you did “random artwork”.

09. Step
Create a new layer set and name it “footer”. Using Rounded Rectangle Tool (radius : 5px) the footer. It should be 850×158 px, about 30px under the body. Rasterize it, fill it with any color and apply these blending options :

Gradient :

Stroke : 1px, opacity : 27%, color : #FFFFFF.

Using 18px Georgia (#C594C1) write down some months just for example, and under them names of the articles.

Using Line Tool draw a straight line under them and put your copyright there. On the right you can add small banner that links to your partners/friends web site.

That’s it! Hope you have learned something! Click here to download PSD.

Flash website design 01/02

Designers Chair — Fri, 06 Feb 2009 16:57:01 +0000

First part of tutorial on how to make simple, yet attractive design for Flash website in Photoshop.

PART 1 (loading page)

In the first part we will make design for our loading screen. Click here to see the final result.

1. Step

Create new document (900×700), create new layer (CTRL+SHIFT+N) and name it “background”. Now fill it with any color you want. Then right click on that layer and select Blending Options. Apply the following settings :

2. Step

Make your foreground color #333333. Then create a new layer and name it “left”. Select your brush tool (size 13px) and in brush preset apply following settings :

3. Step

Select Pen Tool and using Paths (not Shape Layers!) click in the left corner of document (point 1), and then in the center of your document (point 2).

4. Step

Using Convert Point Tool click on point 1 and drag it to point 2 (see picture below) while holding down left mouse button.

5. Step

Right click on the path and select Stroke Path. Then select Brush and press OK. Right click the path again and choose Delete Path.

6. Step

Duplicate layer “left” and name it “right”. Press CTRL+T, right click on layer an select Flip Horizontal. Press enter and then move layer “right” to the right while holding down SHIT key (this will make it move straight).

7. Step

Using Horizontal Type Tool write “loading” between those two layers. Duplicate it and flip it vertical. Reduce its opacity to 10% and drag it down while holding SHIFT. Above you can write current progress, eg. “22%” in Arial.

When you do a flash version just hide layer “22%” and put there the real loading progress you coded.

8. Step

Now just add the title above the same way we did for “loading”. I’m gonna name it “Shade of Grey” but you can put name of your web site or your name (if you are doing a portfolio page).

That’s it! Design for the loading page is complete. First part of this tutorial is finished, be sure to check back in a few days when part 2 (post-loading page design) is published. Hope you’ve learned something about Pen Tool and brush settings. If you don’t understand something leave a comment and i will try to help you.

2D tentacles

Designers Chair — Wed, 04 Feb 2009 18:55:32 +0000

Wanna know how to make those cool tentacles that you see on almost every wallpaper? It’s easier than you think…

1. Step

Create a new document, make it 800×600, and then press D to reset your foreground and background color. From the menu on the left select the Polygonal Lasso Tool.

2. Step

Press CTRL+SHIFT+N to make a new layer and name it “triangle”. Using Polygonal Lasso Tool draw a triangle in the center of your document. It’s very easy to do, just click on point 1, then on point 2, then on point 3 and then go back up to point 1. The smaller your base (marked “a” on the picture below) is, the thinner the tentacle will be.

Press CTRL+D to deselect it.

3. Step

Go Edit > Fill and press OK. Make sure you use foreground color. Now for the fun part. Duplicate layer “triangle” and name it “tentacle01″. Then go Filter > Distort > Shear and apply the following settings:

4. Step

We now have a cool tentacle but it’s upside down. Select layer “tentacle01″, press CTRL+T, right click on the tentacle and select Flip Vertical.

5. Step

Your first tentacle is done! Creating more tentacles is easy. You can duplicate layer “tentacle01″ and transform it using Transformation Tool (CTRL+T) or simply repeat steps 2, 3 and 4 on layer “triangle” with different settings in step 3.

Basic HTML file

Designers Chair — Sun, 01 Feb 2009 18:32:32 +0000

Create a basic HTML file that you can use as a startup for any web site.

This tutorial will be finished soon…

Blue eyes

Designers Chair — Sun, 01 Feb 2009 13:03:47 +0000

Change the color of the eyes to blue in few easy and simple steps.

Blue eyes - before and after

Changing the color of eyes is a simple procedure that takes only a few minutes. Basically, using this tutorial you can change it to any color you want by playing with hue and saturation. You can do this with almost any version of Photoshop.

1. Step
Open your image, and select Elliptical Marquee Tool from the menu on your left (by default).

2. Step
Duplicate your layer (CTRL + J) and work on the top layer. Select the iris of the eye while holding down Shift.

3. Step
Notice that her eyelid is covering a part of the eye so we need to deselect that part. Zoom in and using Lasso Tool make a selection like i did in picture below. Important : hold the Alt key while you do this.

4. Step
Press CTRL + U (or go Image > Adjustments > Hue/Saturation…) and use the following values :

Play with Hue value if you want some other color.

5. Step
Almost done. Press CRTL + D to deselect the selection and than erase the part you don’t need using Eraser Tool.

6. Step
Do the same thing on the other eye using same Hue/Saturation values and you’re done! Hope you’ve learned something.