Best Collections Html, CSS and Javascript Tutorials

Friday, July 10, 2009

50 Excellent Tutorials of 3d Effects Using Photoshop

There are lots of 3d tools to create 3d effects but creating 3d effects in photoshop is really interesting. Even if you want to create 3d object or 3d typographic design everything is possible in photoshop. So today i have compiled 50 amazing tutorials of creating 3d effect in photoshop.

1. 3D Puzzle in Photoshop
A step by step tutorial to create 3d puzzle in photoshop.

2. 3D Metal Text

Create 3D Metal Text with lighting ambience. Give nice effects and shadows to make realistic look.

3. Drawing The Linux Penguin

4. 3D Magnetic “A”

5. 3D New Year Text in Photoshop

.
6. Designing with 3D Render Pack

Here is a tutorial showing how to make a 3D abstract art easily. Hope you guys will find this useful.

7. Virtual DJ Picture
In this detailed tutorial we will learn how to design this nice DJ smile.

8. Create a Slick Black iMac in Photoshop
A nice tutorial by Collis.

9. Designing a 3D Software Box
In this tutorial, designer is going to create a 3D software box using Photoshop.

10. How To Render a Dramatic 3D Wood Cup in Photoshop
An excellent tutorial by Alvaro Guzman.

11. MP3 Player Illustration
Design an MP3 player with this tutorial.

12. Create a Brilliant Vector Lighter
Knowledge of the Pen Tool is required throughout the initial steps.

13. Porsche Digital Rendering Photoshop Tutorial
Very nice tutorial from sketching to rendering.

14. Recreate Aquafina Ads
You may have noticed the new Aquafina© ad spots, but if not, go here www.aquafina.com to see what designer is doing here.

15. 3D Can Tutorial
This tutorial will help you create a three dimensional can in Photoshop.

16. Create a Realistic Blackberry Style Mobile Phone From Scratch
A wonderful tutorial by Jeremy Roux.

17. Nokia 5300 Cell Phone Interface
Tutorial on designing a cell phone interface.

18. Using Light and Shade to Bring Text to Life
Light and shade to make a rather impressive-looking text effect.

19. Web Video Player Skin

20. Mac Colorful Design
Learn in this tutorial how to design an awesome wallpaper with Mac logo.

21. Spectacular Grass Text Effect
This is the first of a five-part set of tutorials where designer use Photoshop to make text out of all sorts of things.

22. Graffiti with Photoshop

23. Transformers Style Text Effect

In this tutorial you will learn how to make the Transformers movie text effect.

24. 3D Mp3 Player

25. Zoom Player Skin Design
Learn to create a fabulous looking player interface in this comprehensive tutorial.

26. How to Create a Super Shiny Pencil Icon
Designer will show you how to draw a pencil icon.

27. 3D Textured Text Effect
In this tutorial, designer will show you how you can make a stylized 3D textured text effect using various textures.

28. Draw Funny TV

29. Design A Detailed Compass Icon In Photoshop
Another drawing tutorial for icon lovers.

30. Rendering a Striking Matchbox in Photoshop
This tutorial consists of creating a digital illustration in Photoshop of a box of matches.

31. Photoshop Electronic Torch Light Icon

32. Photoshop Scissor Icon
Designer is telling you about How you can Create Photoshop Scissor Icon.

33. Drawing Kirby
Designer will tell you all the ins and outs about creating this spherific ball of joy!

34. 3D Cliff Text
In this tutorial, designer will show you how to a text that look like it was formed by cliffs of mountains.

35. How To Illustrate A Delicious Ice Cream Bar
Throughout this tutorial designer will have a look at various drawing techniques.

36. How to Create a Classic Guitar from Scratch In Photoshop
Designer will be creating each shape and effect used to make guitar in Photoshop.

37. Green Apple Style Design
Learn in this tutorial how to create interesting and modern wallpaper.

38. MP3 Player Interface
In this tutorial you will design an interface for a modern MP3 player.

39. 3D Boxes
In this tutorial you will learn how to make cool looking 3D boxes in Photoshop.

40. 3d Vista Box

41. USB Stick Tutorial

42. 3D Ice Cube
In this tutorial designer will try to build a realistic 3D ice cube.

43. Retro Pop Style
Create an Abstract Retro-Pop Wallpaper.

44. 3D Poloroid
Create an Abstract Retro-Pop Wallpaper.

45. 3D Text effect using photoshop
This tutorial shows you how to create a nice 3D text.

46. Boom Boom Wallpaper
In this easy tutorial made for Photoshop CS3. Designer will show you how to create very attractive Boom wallpaper.

47. Phone Digital Rendering Photoshop Tutorial

48. Photoshop Film Clapper Logo Icon

49. Photoshop Leather Belt Icon

50. Hell of Tutorial in Photoshop

if you have any to add 3d effects that you like, please add in comments...
Labels: 3d Effects, photoshop tutorial
Read more...

posted by Subodh Kumar @ 11:40 AM 0 Comments

Wednesday, July 8, 2009

Create Flash Page Peel Effects for your website

If you are wondering how some web page create this little peel away effect on the top right corner of their website, that means it is successfully getting your attention and we assume that’ll make visitors curiously wanting to peel it off and see what’s in store.

view demo click here

This is certainly a very effective way to market products and bring more attention to pages you want visitors to focus.

1. Download required files

Download peel.zip and, extract it. Your peel/ folder should contain these following files:

* pageear_b.swf

* pageear_b.jpg

* pageear_s.swf

* pageear_s.jpg

pageear.js

Plan where you should upload this folder at later stage. For webpage users, you are suggested to upload peel/ inside wp-content/themes/your_current_theme/. Fow now, let’s fire up your favorite text and image editor.

2. Edit pageear.js

Open peel.js with your favorite text editor. Change these following settings:

1. jaaspeel.ad_url – URL you intend to point to.

2. jaaspeel.small_path – Path to pageear_s.swf

3. jaaspeel.small_image – Path to pageear_s.jpg

4. jaaspeel.big_path – Path to pageear_b.swf

5. jaaspeel.big_image – Path to pageear_b.jpg

3. Edit the images

pageear_s.jpg – The small background visitors see before content behind gets revealed. Edit if you’d like to match it with your background.

* pageear_b.jpg– What visitors will see after pointing their mouse to ‘peel the page off’. This is the image you’ll want to edit.

Both flash files, pageear_s.swf and pageear_b.swf can be left un-touch.

4. Upload files

Upload the entire peel/ folder to via FTP your web account. Make sure it matches with the settings you’ve entered earlier in Step 2.

5. Add Javascript in header

Add the following Javascript after <title> before </head>.

Labels: Design inspirations, flash
Read more...

posted by Subodh Kumar @ 11:21 AM 0 Comments

Tuesday, July 7, 2009

Sexy Page Peel Effect Tutorial & jQuery Plugin

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

View Demo

1. HTML - Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an <a> tag. Note - If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.

<div id="pageflip">   <a href="#">    <img src="page_flip.png" alt="" />
<span class="msg_block">Subscribe via RSS</span>   </a>  </div>

2. CSS - Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:

Page Peel Effect with jQuery and CSS

The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.

#pageflip {   position: relative;  }  #pageflip img {   width: 50px; height: 52px;
z-index: 99;   position: absolute;   right: 0; top: 0;
-ms-interpolation-mode: bicubic;  }  #pageflip .msg_block {   width: 50px;
height: 50px;   position: absolute;   right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;   text-indent: -9999px;  }

Note that the “msg_block” height is off by 2px compared to the image property - this is taking in consideration of the drop shadow that the image has.

3. jQuery - Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.

$("#pageflip")
.hover(function() { //On hover...   $("#pageflip img , .msg_block").stop()
.animate({ //Animate and expand the image
and the msg_block (Width + height)     width: '307px', 
height: '319px'    }, 500);   } , function() {   $("#pageflip img").stop()
//On hover out, go back to original size 50x52    .animate({     width: '50px',
 height: '52px'    }, 220);   $(".msg_block").stop()
//On hover out, go back to original size 50x50 
.animate({     width: '50px',     height: '50px'    }, 200);
//Note this one retracts a bit faster (to prevent glitching in IE)  });

Conclusion

The concept is very simple and may come in handy one day. If you have any questions or know of other techniques, please don’t hesitate to let me know~

View Demo

Labels: java script, jQuery