Archive for April, 2012

Light Bulb Vector Using Illustrator

Final Preview:

bulb-vector-final-preview
image-1760

Step-1 Draw a bulb shape and fill with yellow color.

bulb-vector-bulb-shape
image-1761

Step-2 Draw a below like arc at the two edges of the bulb sides and fill it with white and yellow gradient (radial).

bulb-vector-two-edges
image-1762

Step-3 Create a circle fills it with white and yellow radial gradient.

bulb-vector-radial-gradient
image-1763

Step-4 To give a realistic effect like reflection of the light, draw below shape and fill it with white and yellow gradient.

bulb-vector-realistic-effect
image-1764

Step-5 Create the inner components of bulb by using gradient fill.

bulb-vector-inner-components
image-1765

Step-6 Give the outline for the bulb using pen tool. First draw the stroke and go to OBJECT -> PATH -> OFFSET. Set the values as per your requirements.

bulb-vector-pen-tool
image-1766

Step-7 Create the tungsten path using pen tool.

bulb-vector-tungsten-path
image-1767

Step-8 For the top part of the tungsten draw three arcs continuously and go to EFFECT -> DISTORT & TRANSFORM -> ZIG ZAG.

bulb-vector-three-arcs
image-1768

Step-9 Now comes to the bottom part of the light. Apply gradients as like below.

bulb-vector-bottom-part
image-1769

bulb-vector-bottom-gradients
image-1770

bulb-vector-gradients
image-1771

bulb-vector-bottom
image-1772

Step-10 For the shadow effect, draw an ellipse and apply white and gray radial gradient.

bulb-vector-gray-radial-gradient
image-1773

Enjoy 🙂

Tags: , , ,

Thursday, April 26th, 2012 Illustrators, web design, web design tips No Comments

Photo Sliding Gallery using HTML

Final Preview:

Step:1 Open a new HTML Document in dreamweaver.

Step:2 Paste the following code in the HTML Document.

<ul id="sliding">
<li><a href="#nogo">
<img src="pic1.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic2.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic3.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic4.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic5.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic6.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic7.jpg"/></a></li>
</ul>

Step:3 Create embedded <style> style below <head> tag. Add the following CSS Code:

<style>
#sliding {
padding:0;
margin:20px 0 0 20px;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
background:#fff url(back.jpg);
}
#sliding li {
float:left;
}
#sliding li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#sliding li a img {
width:28px;
height:240px;
border:0;
}
#sliding li a:hover {
background:#eee;
width:320px;
}
#sliding li a:hover img {
width:320px;
}
</style>

Step:4 Place required images inside your HTML file folder.

Now run the Program.

Tags: , , ,

Friday, April 20th, 2012 HTML, web design, web design tips 1 Comment

CSS Navigation Menu using background positioning








Step-1 Open an html document. Write the following html code inside the body tag:

<ul id=”navigation”>
<li><a href=”#” id=”home”>Home Page</a></li>
<li><a href=”#” id=”about”>About Us</a></li>
<li><a href=”#” id=”webdesign”>Web Design</a></li>
<li><a href=”#” id=”graphicdesign”>Graphic Designs</a></li>
<li><a href=”#” id=”seo”>Search Engine Optimization SEO</a></li>
<li><a href=”#” id=”contact” >Contact Us</a></li>
</ul>



Step-2  Create a new CSS document and write the following CSS syntax and save it as MAIN.CSS.Here background position defined to draw the different position of the button into visible.

#navigation { list-style: none; margin: 0; padding: 0;}
#navigation:hover li a#webdesign { background-position: -280px; }
#navigation:hover li a#home { background-position: -206px; }
#navigation:hover li a#graphicdesign { background-position: -340px; }
#navigation:hover li a#contact { background-position: -232px; }
#navigation:hover li a#about { background-position: -242px; }
#navigation:hover li a#seo { background-position: -540px; }
#navigation li { float: left; }
#navigation li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
#home { background: url(home.gif); width: 103px; }
#home:hover { background: url(home.gif) 0 0 !important; }
#about { background: url(about.gif); width: 121px; }
#about:hover { background: url(about.gif) 0 0 !important; }
#webdesign { background: url(webdesign.gif); width: 140px; }
#webdesign:hover { background: url(webdesign.gif) 0 0 !important; }
#graphicdesign { background: url(graphicdesign.gif); width: 170px; }
#graphicdesign:hover { background: url(graphicdesign.gif) 0 0 !important; }
#seo { background: url(seo.gif); width: 281px; }
#seo:hover { background: url(seo.gif) 0 0 !important; }
#contact { background: url(contact.gif); width: 116px; }
#contact:hover { background: url(contact.gif) 0 0 !important; }



Step-3 Paste the following code inside the <head></head> tag in HTML file to link the MAIN.CSS.

<link href=”web-design3_files/main2.css” type=”text/css” rel=”stylesheet” media=”screen”>



Step-4 Your HTML, CSS and below images should be in same folder.

image-1597

Now run the program.

Tags: , , ,

Thursday, April 12th, 2012 HTML, web design, web design tips No Comments

Actionscript Particle Color Seperation

Final Preview:

Step-1 Open a new document in Flash. Create the below texts and sliders in Layer-1.

actionscript-particle-color-seperation1
image-1578

Step-2 Go to Windows –> Components –>  Slider to get sliders. Drag the slider into the stage. Here we want 5 sliders and one checkbox.

actionscript-particle-color-seperation1
image-1579

Step-3 Name those 5 sliders as slider1, slider2, slider3, slider4, sliderDarken respectively. Name that checkbox as checkBox1.

Step-4 In layer-2, keyframe-1 writes the following script.

image-1580

image-1581
Step-5 Click here to download the script files and put inside the folder where you kept your .fla file.

Ctrl + Enter to run the program. (Source: dangries.com)

Tags: ,

Friday, April 6th, 2012 Flash, web design, web design tips No Comments

Match Stick Flaming Using Illustrator

Final Preview

Match-stick-flaming-final
image-1555

Step-1 Open a new document in illustrator. Draw a rectangle fill with linear gradient in the combination of #a93f23 and f0cc87.

Match-stick-flaming-linear-gradient
image-1556

Step-2 Duplicate the rectangle and reduce the height alone.

Match-stick-flaming-reduce-height
image-1557

Step-3 Select both rectangle and go to Object –>Blend –>  Blend Options. Give spacing as Specified steps and value is 50.

Match-stick-flaming-blend-options
image-1558

Step-4 creates line on the rectangle.

Match-stick-flaming-line-on-rectangle
image-1559

Step-5 Draw a circle and make it like below shape using direct selection tool.

Match-stick-flaming-direct-selection
image-1560

Match-stick-flaming-direct
image-1561

Step-6 Fill with radial gradient in the combination of #d5a16c and #ab6038.

Match-stick-flaming-radial-gradient
image-1562

Step-7 Duplicate it and fill with brown color.

Match-stick-flaming-fill-color
image-1563

Step-8 Draw a rectangle like box using pen tool to give the real effect to the stick.

Match-stick-flaming-pen-tool
image-1564

Step-9 Draw a two circles. Fill the below color. One circle should be smaller than another.

Match-stick-flaming-one-circle
image-1565

Step-10 Duplicate it and place it randomly.

randomly-circle
image-1566

Step-11 Draw a pear like shape and give create gradient Mesh. Give row value as 5 and column value as 4. Fill

gradient-mesh
image-1567

Step-12 Fill it with black color.

Match-stick-flaming-color
image-1568

Step-13 Select the center part nodes of the sphere shape and give yellow and orange color mesh. Go to Transparency and apply screen mode.

transparency
image-1569

Step-14 Create a below shape and repeat steps 11, 12, 13.

below-shape
image-1570

below-shape
image-1571

Step-15 Like above creates blue flame.

blue-flame
image-1572

Enjoy:0)

 

Tags: , , ,

Monday, April 2nd, 2012 Illustrators No Comments
Request a Free SEO Quote