Step 01

As always open up Photoshop, create a new document and then take out the rectangle tool(U) and draw a nice rectangle like this. This is going to be our main ribbon so you decide the size of it

Time to add some styles to our rectangle to make it look like a real ribbon. We all know how to add styles to a layer don’t we? open up layer styles by simply double clicking the layer on layer pallet or just right click and select blending options and apply these following effects

Now you should have something like this

We are going to make our main ribbon look awesome, well here’s how to do that take out the rectangle tool(U) again and draw a rectangle inside our main ribbon. Something like this

So now just like last time apply these following effects to this rectangle as well

Step 02

Now we are going to give our ribbon a 3D stand out effect. We are going to use a simple trick for that, draw a small rectangle like this on our ribbon, make sure you use a dark blue color like (001c3e)

Now here’s the trick part on the edit menu to to transform and select perspective, edit>transform>perspective now just click on the center tab of the right side of the rectangle and slide it down, something like this

After you get that right, send it behind the main ribbon we made. Just send it below the main ribbon layer in layer pallet

Now do the same to the other side as well and you should have something like this

;

Step 03

Now we are going to create the hold for our main ribbon. in order to do that again draw a rectangle like this behind the main ribbon.

now we need our ribbon fold to look awesome don’t we? so apply this following gradient to make it more stylish

After you are done with that, you have to draw another rectangle inside that just like what we did in the main ribbon

Apply these following effects to it after you get that part done

Now drop its layer opacity down to 50%

Now you should have a awesome ribbon like this

Step 04 (Optional)

Since its a navigation ribbon we are going to create a place for logo, well how to do that is select the eclipse tool and draw a circle like this on the middle of our ribbon

And apply these following effects to it

After you are done with the first circle, you have to draw another circle inside the last one something like this

And apply following effects to the second circle

When you are done with that draw a 3rd circle inside the second circle and apply these effects to it

There you go here’s how our final ribbon navigation looks like

There are lots of advantages of using sprites.

• Decrease the number of HTTP requests made for image resources referenced by our site.
• Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
• No java script needed, only CSS.

For this tutorial we are going to use the following image to implement our rollover image. Our image is consists of same two images with grayscale and color. Resolution of each image is 200 x 200 px.

What we are going to do?

Initially we can display only gray scale area of our image. As we mouse over the image it changes to the color image.

How we are going to do?

HTML

Simply add following html code to your editor.

<a href="http://www.mclanka.com"> </a>

This is just a link with a class called logo-link.

CSS

Now following styles CSS styles are applied to our logo-link class as follows.

.logo-link

{

width:200px;

height:200px;

text-decoration:none;

display:block;

background-image:url(logo.jpg);

background-position:197px -1px;

}

.logo-link:hover { background-position:0 0; }

As you can see, the background-position CSS property does the trick here.

here is the demo example what we have done.

Step 01

Of cause you have to open up Photoshop and create a nice document unless you are planing to draw this on a paper well the size is totally up to you, you can mange it to the slider size you want. Background color is totally up to you also, I’m using gray as mine coz y’all know I’m a huge gray fan

Take out the rectangle tool (U) and draw four rectangles, you should make something like following

This slider is really easy to make. we are going to apply the same style to all four rectangles. in order to do that open up the blending options of any rectangle and apply these following effects.

After you apply those effect to one rectangle right click on it in the layer pallet and select the copy layer style option and paste that style to other three rectangles as well. This will help ya all the trouble of apply the style individually. Oky so when u go through all of that you should get something like this

Step 02- Creating The Pagination and Navigation

Time to create the pagination buttons. Take the Circle tool out (U) and draw a small circle below our slider, make sure you have (8e8e8e) selected in the color pallet. This is for the selected pagination button, you should draw something like this

After that draw two more circles right next to what we drew before. This time draw them in a slight darker gray i recommend using (5b5b5b). when you got that part done, using the same method we used before apply all three circles this following style

Now you should get a sweet pagination like this

Now we need navigation to control our awesome slider. Draw nice arrow heads  on both sides of the slider facing left and right something like this following image

Time to make them look cool you know how to do that right ? yup styling! apply these following effects to them

Now you should have awesome navigation like this

Step 03- Finishing The Slider

If you have followed all those steps now you should have a image slider that looks like this

Now its time for you to load in your images, I’m using images of Up movie here because I really love that movie ok then the next thing I’m going to do is totally optional. I’m going to add a shadow for our thumbnails well its easy i think its worth putting the effort coz its going to make our slider look awesome. Take the Ellipse tool out (U), Select black color and draw a ellipse looks like this

Go to Filter>Blur>Gaussian Blur and apply as following

Drop the shadow layers opacity down to 75% and duplicate the shadow,move those shadow layer behind the small thumbnails. you can change the shadow size to match yours requirement. So here you go now you created a awesome slider that looks like this

Hope you guys enjoyed this tutorial, don’t forget to leave comments and feedback see ya again with a new tutorial

Step 01

Open up Photoshop and create a new document background is totally your choice. Select the Rectangle tool (U) and draw a nice circle for our saucer, something that looks like this.

And apply these following effects to our saucer circle

After you apply those effect,you should get something like this

Step 02

Time to create our cup. Just like in last step take the rectangle tool (U) and draw a circle inside the saucer we made in last step something looks like this.

Time to make it look like a real cup, apply these following effects to our cup shape.

Now we got something like this

Step 03

Ok so we made the cup and saucer time to make the handle. You can make this shape by drawing a rounded rectangle and cutting it half or you can use the pen tool. You should draw something like this

Now apply these following effects to make it look realistic.

Now you should have a lovely coffee cup looks like this

There you go we made a lovely looking coffee cup. So now all we got to do is fill our cup with coffee. In order to do that draw a circle in side our cup and apply this following gradient to it

Here’s how the final result looks like

before we are going further , let’s take a look the demo example of our task.

In Present Web World, Image slide-shows, Image galleries are much useful part added by web developers and designers for archiving good looking features to their websites. Today we are going to build simple Image slide-show Using old but gold web technology CSS, Ugly HTML and amazing Jquery Library.

Step by Step explanation of what we are going to do

1. Create slider outer block.

HTML

<div id=”slider”></div>

CSS

div#slider{

width:500px;

height:300px;

margin: auto;

}

applying above css to our block, it will be covert with 500px width and 300px height.

    2.Create slider mask.

Suppose our Slider show consists of 5 images with 500px width and 300px height. Then our slider mask should be 5 times of width when comparing with outer block. Our slider mask then should be put inside the outer block.

HTML

<div id=’slider’> <!-- outer slider  -->

<div id=’slider-mask’> </div> <!-- slider mask div -- >

</div>

Now what happened is, our outer block will be take image slider mask width ( 500 x 5 ==2500px). But we have to keep original width for the outer block.

Here comes into play CSS to achieve our purpose.

If we can hide this overflow width we can succeed. Yes we can do that. Lets modify our CSS for the outer block.

CSS

div#slider{

Width:500px;

Height:300px;

<strong>Overflow :hidden;</strong>

}

Using overflow property and related hidden value, We have done this. overflow :hidden will hide both overflowed width and height from its original width and height.

Now our slider mask block will stay with its original height and width inside outer block.but we only can see its one five from its original width.

CSS

div#slider-mask{

width: 500%; /* set width as five time of outer block */

height: 100%; /*set same size of the outer block */

}

   3. Create slider Item blocks.

Now we can create 5 blocks for our 5 images inside the slider mask. As mentioned earlier our images will be the same dimensions of the outer slider. Then we can create same slider item block with the same dimensions of a image.

Lets do that.

HTML

Since Originally div element are block level elements and they assort them top to bottom themselves. But what we need to do here is float them as left to right. Lets continue our works.

CSS

div.slider-item{

width: 20%; /*set same outer block width.since our slider item block is inside the mask we need to get one five times from slider mask width */

height: 100% /*same slider mask width. This is the same width of outer block */

position:relative ;

<strong>float:left; /*this will float our slider images left to right. */</strong>

}

Lets look at slider item CSS again. You can see that we have added relative value to position css property. This property will be helpful to animate our slide-show in latter Jquery part.

  4.adding images to each slider item.

Now we can put our 5 images inside slider items.

HTML

<div id="slider"> <!-- outer slider -->

<div id="slider-mask">

<div class="slider-item">

<img src="./images/slider-image1.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image2.png"  alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image3.png" alt=""/>

</div>

<div class="slider-item">

<img src="./images/slider-image4.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image5.png" alt=""/>

</div>

</div> <!--slider mask div -- >

</div>

   5.Asking Jquery help

Before animating our slider we need to load jquery library and put them inside our header tags.

<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

Here’s the code to link to Google’s jQuery repository. It grabs the latest jQuery version.

We are now creating JavaScript function for animating our slider.>

<script type="text/javascript">// <![CDATA[

var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

// ]]></script>

Explaining above funciton line by line.

• var n =0;   We set 0 as the initial value to the JavaScript variable called n.

• id=n%5+1;    Get the reminder value by solving n divided by 5 and assign reminder value to the js variable called id. Here 5 is no of images of our slide-show. Initially this will be 1 since n=0 .

• leftPos=(1-id)*500+”px”;  This equation initially will set to the (1-1)*500 = 0 and adding string “px” to the computed value. Final value is assigned to js variable called leftPos. Here 400 is the image width/outer block width of our slider.Initially leftPos value will be 0px.

• $(“div.slider-item”).animate({ left:leftPos},1500);   This is how we are animating our slider. We wrap slider elements with class slider –element and push all of them to 500px left side direction from their original position within one and half seconds. we are doing it by changing left css property of slider item. We couldn’t apply left property unless we set their position as relative, absolute or fixed. But we have done it in our one of previous steps. Got it…
  Initially left property is set to 0px. Therefore slider items will be pushed to left from their initial positions.

• n=n+1;   Incrementing the n variable from 1.

• s=setTimeout(“slideShow()”,3000);    This will be the nicest part in our function. SetTimeOut function is the predefined js function and it can be used to called another js function once for the specified time period as a continuous loop unless we advice it to stop looping.Here we called our same function in every 3 second. For the second time our function called by the setTimeout function variable n will set as 1.If n==1Then id will be assign as 2 and leftPos will be -400px and slider item will position -500 px to left from their original position. Now 1^st slider item disappear  and 2^nd slider item will be comes to the stage.
  if n==2    Then id will be assign as 3 and leftPos will be -1000px and slider item will position -1000 px to left from their original position. Now 1^st ,2^nd slider items will disappear and 3^rd slider item will be comes to the stage.
  If n==3   Then id will be assign as 4 and leftPos will be -1500px and slider item will position -1500 px to left from their original position. Now 1^st ,2^nd and 3^rd slider items will disappear and 4^th slider item will be comes to the stage.
  If n==4     Then id will be assign as 5 and leftPos will be -2000px and slider item will position -2000px to left from their original position. Now 1^st ,2^nd and 3^rd and 4^th slider items will disappear and 5^th slider item will be comes to the stage.
  
  if n==5Then id will be assign as 1 and leftPos will be 0px and slider items will position 0px again and get their original position again. This will again show the 1^stslider in the stage and others are hidden by the outer slider.You can see that this will be continuously happened since id value only change 1-5 with respect to the n.

    5.Final Step.

We have almost done everything. Only one step away. Yet our slider show will not run as we expected . Our function will not automatically run as our code executed inside web browser. For automatically execute our slider function we need to call our function inside the jquery document.ready function.

 
<script type='text/javascript'>
<pre><strong>$(document).ready(function() { slideShow });</strong></pre>
var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

</script>
okay...now you are done....  
download source code from here
]]>
			http://www.webdesignsrilankablog.com/create-simple-slideshow-using-jquery-and-css-tricks/feed/
		0
		
		
		
		http://www.webdesignsrilankablog.com/create-a-cool-slider-in-photoshop/
		http://www.webdesignsrilankablog.com/create-a-cool-slider-in-photoshop/#comments
		Fri, 23 Mar 2012 06:42:06 +0000
		Marlon Iddamalgoda
				
		

		http://www.webdesignsrilankablog.com/?p=394
		
			Hope ya’ll doing good. This tutorial is for web designers. I’m going to show you how to create a cool slider in few easy steps. Let’s get started

Step 01
Open up Photoshop blah! Blah! Blah! Create new document. Take out the rounded rectangle tool(U) and draw a track for our slider bar. Something like this

Apply the following effects on our track. You can take the blending options out simply double clicking on the layer on the layer pallet and apply these following effects

After that, you should have something like this

Step 02
Time to create the progress bar for our slider same as last time take out the rounded rectangle tool. color choice is totally yours im using (19c2c8) here. draw the progress bar inside the track we made. just like this

After you get that part done apply these following effects to make our bar look cool.

Step 03
Lets create the handle for our slider. get the ellipse tool (U) and draw a circle like this. Don’t worry about the color we are going to apply a gradient to it.

Apply these following effects after you get that part done.


Here’s how the final result looks like

]]>
			http://www.webdesignsrilankablog.com/create-a-cool-slider-in-photoshop/feed/
		0
		
		
		
		http://www.webdesignsrilankablog.com/create-a-sticker-effect-using-photoshop-in-5-seconds/
		http://www.webdesignsrilankablog.com/create-a-sticker-effect-using-photoshop-in-5-seconds/#comments
		Fri, 16 Mar 2012 09:49:20 +0000
		Marlon Iddamalgoda
				
		

		http://www.webdesignsrilankablog.com/?p=387
		
			We all love stickers don’t we? So I’m going to teach you how to create a sticker effect in 5 seconds

Load your image in to Photoshop. I’m using my android batman image here which is top ranked on Google   you can download it from our blog. The effect goes well if you use your image without the background, it doesn’t really matter though. Okay enough chit chats let’s get to the work. Here’s what I’m using

Easy thing, open up blending options and apply these following effects

Now here’s how the final result looks like  

?
]]>
			http://www.webdesignsrilankablog.com/create-a-sticker-effect-using-photoshop-in-5-seconds/feed/
		0