This is an extremely useful, well very useful Photoshop tutorial. In this Photoshop tutorial, I will show you how to make some elegant and highly detailed Knob and or Dial scratches. This is a beginner, to intermediate photoshop trick, so you kind of have to know your way around photoshop to create this stylish effect. This tutorial is also for creating a knob or dial (more than just the scratches).

Step 1

Lets start this tutorial by creating a new photoshop document. Make the width 400px and make the height 300px with 72ppi and in RGB color like so:

Step 2

Next, lets create some new guides to keep everything centered, tutorials usually lack to say what guides to make, so in this one I will show you what guides to make. Go to View>New Guide. Then create a vertical guide of 50%, and create a horizontal guide of 50%. This will keep everything in line and in the center. Lastly, go to View, then make sure the Snap is checked. Then you will get something looking like this:

Step 3

Next, grab the Ellipse tool (U) and create a circle shape to about this size:

Step 4

Next, we will double click on the shape's color (next to the shape in your layers palette), and make the shape the following color: #CCCCCC, the color is used in image for the step above:

Step 5

Now to create the knob or you can call it a dial if you'd like to. Okay, so lets double click on your shape in the layers palette, bringing up the Blending Options, or you can go to Layer>Layer Style>Blending Options. For step 5, click on the Drop Shadow layer style. Make the Blending Mode normal, then make the opacity 15%. Next, when changing the Angle, Make Sure you uncheck the Global light, once you have done that you can make the angle at 56deg (degrees). Next, you will need to make the distance of the drop shadow to 2px (pixels). Then keep the Spread at 0%, then make the Size to 10px. Then make the Contour similar to the one in the picture below. Keep the Anti-aliased unchecked, and then keep the noise at 0%. Make sure the color is at #000000 (black) Your Drop Shadow Layer Style should look like this:

Step 6

We will make the next layer style, for this one, make sure the Inner Glow layer style is checked. To style the Inner Glow, we will need to make the Blending Mode normal, keep the Opacity at 100% and the Noise at 0%, then make the color #FFFFFF (white). Keep the Technique at Softer, have the Source at Edge. Then keep the Choke at 0%, and make the Size 3px. Then keep Contour normal like the one in the photo below, and keep the Anti-aliased unchecked. Then make the Range at 50% and the Jitter at 0%. Your Inner glow should look like this:

Step 7

Now to create a nice Bevel and Emboss. You need to make the Style and Inner Bevel, make the Technique Smooth, keep the depth at 100%, make the Direction Up, make the size 1px, and keep the soften at 0px. For the Shading, make sure the Global Light is unchecked, then make the Angle 111deg, and the Altitude 42deg. For the Contour, make it normal like the one in the image below, the Anti-aliased should be unchecked. For the Highlight Mode keep it Normal, make it a white color (#FFFFFF) and slide it to 100%. For the Shadow Mode keep it Normal, make it a black color (#000000), and slide it to 32%. Your Bevel and Emboss Layer Style should look like this:

Step 8

Lets now finish the knob layer style with creating an elegant Gradient Overlay. Keep the Blending mode Normal, and make the Opacity 100%. Next, to create this specific gradient you must copy the following. This is read from Left to Right so pay close attention. There should be 9 total Color Stops for this gradient. The First (1st) color stop should be color #AAAAAA (grey) and have a location of 0%. The Second (2nd) color stop should be color #f7f7f7 (light grey) and have a location of 9%. The Third (3rd) color stop should be color #C8C8C8 (gray) and have a location of 14%. The Fourth (4th) color stop should be color #F7F7F7 (light grey) and have a location of 31%. The Fifth (5th) color stop should be color #C5C5C5 (gray) and have a location of 51%. The Sixth (6th) color stop should be color #FFFFFF (white) and have a location of 57%. The Seventh (7th) color stop should be color #BBBBBB (grey) and have a location of 63%. The Eighth (8th) color stop should be color #F2F2F2 (light grey) and have a location of 75%. The Ninth (9th) color stop should be color #AAAAAA (grey) and have a location of 100%. Lastly, let's keep the reverse unchecked, the Style should be at an Angle, align it with the layer, and make the angle at -132deg and scale the gradient to 100%. In the end, your Gradient Overlay should look like this:

Step 9

Now that the knob/dial is done, we can finally create the Scratches (scratched/etched effect). You will need to go to the tab "Paths", this should be above your Knob/Dial layer. After you click on the Paths tab, select the knob layer by Loading the Path as a Selection, this will select the knob layer. Next (wile keeping the selection, Do not deselect it, if you do happen to deslect it just reselect Shif+Ctrl+D), create a New Layer (Shift+Ctrl+N). Then grab the Bucket tool (G) and fill the layer (inside the selection) with the foreground color #FFFFFF (white), and make sure it's at 25% when you do the Bucket Fill, keep the blending mode normal before you fill it.You should get a light white transparent layer like so:

Step 10

Then go to Filter>Noise>Add Noise. You will need to make the noise amount 400% and make the distribution, Uniform. Make sure the Monochromatic is checked. Your noise layer should end up like this:

Step 11

Now to make the Noise "Spin". You will now have to go to Filter>Blur>Radial Blur. Make the Amount 30, for the Blur Method select Spin, and for the Quality, keep it at best.You should end up with this:

Step 12

For the Grand Finale, let's add some better detail and polish it up a bit, it's very quick, nothing long. For the Scratch layer, make the Opacity 80% (not the Fill opacity, just the regular layer opacity). Then Switch the Blending mode (for the layer) from Normal to "Color Burn". You should end up with this:

That about sums it up, I hope you enjoyed my tutorial on How To Create Knob And Dial Scratches Using Photoshop! Please comment and let me know if you liked this tutorial or if this helped you out in some way.

License: Creative Commons Attribution 3.0

- Re-sale and or Re-distribution is forbidden.

- Remember to link back to Icondeposit.com or this post if you are using this elswhere.

The file for this includes the whole tutorial as well as the PSD for the finished image.

Head over to the "Design Category" to download the file: http://www.icondeposit.com/design:dial-version-3-includes-tutorial

I've came across some people usually wondering how some websites have such crisp and clear font. There are two reasons for this:

1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.

2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.

When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.

Lets start off by adding the font smoothing hack to your stylesheet:

html, html a {
    -webkit-font-smoothing: antialiased !important;
}

Here is the definition of anti-aliased: http://en.wikipedia.org/wiki/Spatial_anti-aliasing

Now for the text shadow effect to really smooth out the font:

html, html a {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

Here is the code all put together:

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

To really see what I am talking about, here are a couple of demo's that shows it's smoothing.

If you have a good eye for this kind of design, you will notice the difference:

Here is how it looks when the font is not smoothed:

Here is how it looks when the font is smoothed:

Just was messing around and made this Forrst Icon using CSS3. This is all CSS3 coding (no images used), It works with Google Chrome and Mozilla, I never checked it out on Safari but I'm sure it's fine on that too. Our profile on Forrst is http://forrst.com/people/IconDeposit for more of my posts.

The Wikidot syntax (for wikidot users):

[[div class="forrst-wrap"]]
[[div class="forrst-tree"]]
[[div class="forrst-trunk"]]
[[div class="forrst-branch1"]]
[[div class="forrst-branch2"]]
[[div class="forrst-branch3"]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

The HTML coding:

<div class="forrst-wrap">
<div class="forrst-tree">
<div class="forrst-trunk">
<div class="forrst-branch1">
<div class="forrst-branch2">
<div class="forrst-branch3">
</div>
</div>
</div>
</div>
</div>
</div>

The CSS:

.forrst-wrap { /* Background of Icon */
    width: 300px ; 
    height: 300px ; 
    border: none ;
    background: #335D30;
    background: -moz-linear-gradient(top,#4A7746 25%,#335D30 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,#4A7746),color-stop(100%,#335D30));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A7746',endColorstr='#335D30',GradientType=0);
    padding: 8px 15px 8px 12px;
    margin: 30px auto 0  ; 
    padding: 30px ; 
    -webkit-border-radius: 200px ;
    -moz-border-radius: 200px ; 
    border-radius: 61px; 
    position : relative; 
    -webkit-box-shadow: 0 0 7px #1A3911 ; 
    -moz-box-shadow: 0 0 7px #1A3911 ;
    box-shadow: 0px 0px 5px rgba(255,255,255,.5), inset 1px 1px 5px rgba(255,255,255,0.5) ;
    top:-20px;
}
 
.forrst-tree { /* Forrst Tree */
    margin: 0 auto ; 
    border-left: 120px solid transparent; 
    border-right: 120px solid transparent; 
    border-bottom: 270px solid #4a9e64 ; 
    width: 2px ; 
    position: relative;
}
.forrst-trunk { /* The Tree Trunk */
    width: 20px ; 
    height: 125px ; 
    background: #336f30;
    position: absolute ; 
    top: 170px ; 
    left: -10px ; }
 
.forrst-branch1, .forrst-branch2, .forrst-branch3 { /* The Branches */ position: absolute; width: 13px; height: 45px; background: #336f30; }
.forrst-branch1 { /* Left Branch */ left: -13px; top: 20px; margin-righ: 50px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;}
.forrst-branch2 { /* Top Right Branch */ left: 25px; top: 20px; -moz-transform: rotate(-55deg) !important; -webkit-transform: rotate(-55deg) !important;}
.forrst-branch3 { /* Bottom Left Branch */ left: -30px; top: -10px; right: -60px; -moz-transform: rotate(-0deg) !important; -webkit-transform: rotate(-0deg) !important; height: 60px !important;}

In this tutorial we will explain in detail, what PHP is and how to run a simple application on your own computer, this is to help your development of websites go much faster.

First, let’s begin to understand what PHP is and what’s required to make it run correctly.

PHP is a scripting language that runs on the “server-side”, which means that browsers aren’t able to process it, and it can be run from the command line or inside a webserver, e.g. Apache (more on that later). PHP is currently the most common scripting language used in today’s world, and it doesn’t just allow you to dynamically write HTML, it interacts with other databases and make’s use of other plugins and extensions. This is to provide your user with the best possible experience while surfing on the web or your website. The era of static websites has now come to an end with the introduction of PHP and other scripting languages.

Webpages are basically HTML files that include several hyperlinks to other files which can either be CSS, Javascript, images, media or other HTML files. When the HTML reaches the browser, no PHP scripting should be there. First, because PHP is not HTML and the browser doesn’t understand it. Second, because PHP is intended to run only on the server to provide HTML code for visualization.

To write PHP you can use the same HTML editor you’re already using, since PHP is just “text” mangled between HTML. Notice that PHP can do a lot more stuff than writing HTML, but it has to be contained in the files which are processed by the server. For now, just assume that we are using PHP to write HTML.

Every piece of PHP code inside any document follows certain rules. It must follow this specific pattern:

<?php
//PHP code here...
?>

Notice the <?php before writing the PHP code and the ?> after writing the PHP code. This tells the server that the piece of code enclosed is PHP and it has to be processed by the PHP extension.

But, what if the webserver doesn’t understand it? Simple, it sends the code to the client in the same way as HTML.

Example: Try opening a file in your web browser that includes the following contents (save it to a file, name it hello.php, and open it in the web browser of your choice):

<html>
<head>
<title>My first PHP Page</title>
</head>
<body>
<h2> <?php echo 'Hello World!'; ?> </h2>
</body>
</html>

You will notice that everything is shown, including the PHP code, which shouldn’t be there.

So, to start effectively running PHP code, we will need a webserver.

For Windows users, I advise you to install the WAMP Server it is really easy to install and setup with it’s extensive functionality and it’s easy to configure with the same versions your web host will provide you with.

If you’re a MAC OS X user, MAMP seems to be the perfect solution. As any MAC OS X application, its installation is simple, and it also provides a nice app to manage your configuration and a widget to start and stop the servers.

For details on installation and configuration, please refer to their “products page”. Nevertheless, you can also ask questions here about it and I will try to answer.

Sidenote on Webhosting companies: Any webhosting with PHP and MySQL support will do, the vast majority of them support it so pick the one you prefer. For the sake of simplicity, I’d go with one providing cPanel, which is a control panel for site managing, which allows easy backup and restore functionality. In case you need to change hosting company, you just need to backup from the old one and ask for restoration on the new one.

Each of the above mentioned products, contain a directory named htdocs or www, this is where you should place your files. It is advisable that you create a folder inside that one, say hello (…/htdocs/hello/) where you’ll put the hello.php file created above. Place the file inside and now direct your browser to //http://localhost/hello/hello.php// and you’ll be able to see something similar to:

Hello World!

Note that, Hello World! comes from PHP, through the use of the “echo” command which prints the “Hello World!” text in that place of the HTML file. Looking at the resulting HTML you should be able to see:

<html>
<head>
<title>My first PHP Page</title>
</head>
<body>
<h2> Hello World! </h2>
</body>
</html>

Now you’re ready to start learning PHP, there are a few nice tutorials on the web, this one from W3Schools that in my opinion provides a great kickstart and insight. Follow that tutorial if you want to learn more on PHP, in the next tutorials, we’ll cover PHP in more depth assuming that you’ve followed and understood that tutorial.

I hope you enjoyed this tutorial, feel free to comment, ask for help, provide tips on how to improve it, and also any new ideas for future tutorials.

If you are going to be using this tutorial, please link this back to our e-commerce website freebie post… http://nydesignweb.com/archives/166

Written and Thought of by Nuno Senica - Co-owner of my site Design Web

Here is a huge freebie that will be extremely useful for web developers and graphic designers. This is a custom designed CSS3 styled button sprite. For the definition of an "image sprite" please refer to Wikipedia's definition of Sprite (computer graphics).

This download is a .zip file that includes a Read Me file, a promotion image, promotion thumbnail, very large .png image that contains an already made "Download Now!" text inside the button area. Also comes with a .PSD file for people that own Photoshop, and a .XCF file for people that have Gimp. The Photoshop and Gimp files can be used to re-color, and edit completely. This is licensed under the Creative Commons Attribution 3.0 License so you are free to edit this as long as this work is linked back and given all credit to Icondeposit.com and the graphic designer Matt Gentile. It must be linked back to this page.

This work also comes with an already designed CSS stylesheet for the buttons, you will just need to customize it how your site is configured. If you do not know how to use these buttons on your site then please feel free to contact us.

If you would like to use the big download button on your site then here is the CSS code for it:

/* CSS code designed by Matt Gentile - Creator of Icondeposit.com */
.download_button {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 0px no-repeat; /* When not hovered over */
}
.download_button:hover {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -121px no-repeat; /* When hovered over */
}
.download_button:active {
    width: 492px;
    height: 120px;
    background: transparent url(images/downloadnowspriteback492.png) 0 -243px no-repeat; /* When you press down on the icon or the icon is activated (clicked on) */
}

Download This CSS Button!

This list of jquery plugins is in no specific order, it's just our pick of the Top 20 free amazing JQuery plugins from across the internet. It features everything from login and contact forms, to image and content sliders. Enjoy!

1. Animated Content Menu With JQuery

View Code/ Download

2. Creating a Facebook-like Registration Form with JQuery

View Code/Download

3. How to Make Your Own Twitter Timeline

View Code/Download

4. Beautiful Slide Out Navigation

View Code/Download

5. Shutter Effect with Canvas and jQuery

View Code/Download

6. Flicker Powered Slide Show

View Code/Download

7. How to make a Rotating Billboard System using JQuery and CSS

View Code/Download

8. Fullscreen Gallery with Thumbnail Flip

View Code/Download

9. Website Tour with jQuery

View Code/Download

10. Ajax based Shopping Cart JQuery Plugin

View Code/Download

11. Speeding Up Google Analytics times with a JQuery Plugin

View Code/Download

12. Animated Page Scroll With JQuery

View Code/Download

13. Quick Feedback form with PHP and JQuery

View Code/Download

14. JQuery Cross Browser Right Click Vertical Menu

View Code/Download

15. Sprite Up the Web

View Code/Download

16. Simple Lava Lamp Menu Tutorial with jQuery

View Code/Download

17. Create a Realistic Hover Effect With jQuery

View Code/Download

18. Fancy Thumbnail Hover Effect w/ jQuery

View Code/Download

19. Facebook Style Footer Admin Panel Part 2

View Code/Download

20. Create an amazing music player using mouse gestures & hotkeys in jQuery

View Code/Download