This post is part of our daily series of posts showing the most inspiring images selected by some of the Abduzeedo’s writers and users. If you want to participate and share your graphic design inspiration, just send us, via email, the image with the link from where you found it, also use “Daily Inspiration” in the subject, and don’t forget to send your Abduzeedo username; or via Twitter sending to http://ping.fm/2nrvX

If possible use the HTML code: <p class="imgC"><a href="Link to the page you found the image"><img src="Link to the Image" /></a></p>

Do you want to see all images from all Daily Inspirations? Check out http://ping.fm/0glfw

2D

ABOVE

ABOVE X WHITEWALLS MAY 1st, 2010 from ABOVE on Vimeo.

al b sure

ciR-e

Fabiano

Fabio

featheredpixels

Gisele

Grosse8 and Lichtfront

Augmented Sculpture by GROSSE8 & LICHTFRONT / Passagen 2010 from Lichtfront on Vimeo.

Haron

JAMT

Juitz

nenuno

Stéphane

Via Twitter

Send your suggestions via Twitter to http://ping.fm/mSQvg using #abdz in the end of the tweet.

@djbennett999

@Rodrok

@tiagobenevides

@daniel_nelson

@allrox

http://bit.ly/cwiWtz

In this tutorial i’l be walking you through the process of converting the “Pop-Up Navigation” into a fully functional CSS navigation.

Creating The Navigation In Photoshop

If you haven’t already created the navigation you can do so by following “Part 1” of the tutorial “HERE“.

Creating The HTML Markup

Start a new HTML file inside your favorite HTML editor then save it right away inside a new folder on your desktop. Save the HTML file as “index.html”, create a blank CSS file also saving it right away inside the same folder as your HTML file. Save the CSS file as “style.css”.

Inside your HTML document, within the “HEAD” tag link your stylesheet using the normal method.

<link href="style.css" rel="stylesheet" type="text/css" />

Inside the “BODY” tag of your HTML document create an empty DIV called “Container”.

<div id="container">
</div><!--container ends-->

The “Container” DIV will be the main DIV in which everything will sit inside.

Creating The Navigation Markup

Start off your navigation markup with an unordered list “UL”, the unordered list should have a class of “Navigation”.

<div id="container">

<ul class="navigation"
</ul>

</div><!--container ends-->

Inside the unordered list add 6 list items each with there own class. For the purpose of this tutorial i’ve gave each list a class of button1, button2, button3 etc…

<div id="container">

<ul class="navigation"
</ul>
<li class="button1"><a href="#" title="PS">PS</a></li>
<li class="button2"><a href="#" title="DW">DW</a></li>
<li class="button3"><a href="#" title="ID">ID</a></li>
<li class="button4"><a href="#" title="AE">AE</a></li>
<li class="button5"><a href="#" title="AI">AI</a></li>
<li class="button6"><a href="#" title="FL">FL</a></li>
</div><!--container ends-->

Slicing Our Navigation At Normal State

Open your PSD file in photoshop, open up the layers palette, if it isn’t already open you can open it by pressing “F7″. Inside the layers palette locate your background snippet for each button.

Once you’ve located each background snippet highlight them by clicking each individual layer whilst holding down the “CTRL” key on the keyboard.

When you’ve highlighted the background snippets go to “Layer > Merge Layers”. All the background snippet layers should be merged into one layer. Re-label the layer “Background Snippets” then drag the single layer right down to the bottom of the stack above your locked background layer.

Now highlight all your icon layers using the same method “CTRL + CLICK”. Merge the icons into one layer then drag them down to the bottom of the stack below your “Background Snippets” layer.

You now need to select all your shadow layers and merge them into one single layer. Drag the single shadow layer underneath your “background Snippets” layer. Finally do the same for your lines layers. (Note the order of the stack)

Were now going to cut into the icons so we can get rid of our background snippets layer, doing this will make it easier to save the navigation image as a sprite.

Make a selection around your background snippets. You can do this quickly by holding down the “CTRL” key and clicking the little thumbnail in the layers window OR, select the background snippet layer and go to “Select > Load Selection”.

Once you’ve loaded the selection around your background snippets select each other layer apart from the “Lines Layer” and “Background Layer” and hit the delete key. Finally delete the Background Snippets Layer”.

Save your PSD file, then open up your hover state PSD file.

Slicing Our Navigation At Hover State

Repeat all the steps explained above only this time do them on the hover state PSD file.

Creating The Sprite

Re-open your normal state PSD file, select the rectangular marquee tool then make a selection around your navigation. Be sure to include the lines underneath each icon.

Once the selection has been made hide the background layer and go to “Edit > Copy Merged”.

Create a new document by going to “File > New” then press ok (The dimensions of the selection should automatically be entered into the new document box). In the new document go to “Edit > Paste, your selection should now be pasted into the new document.

We now need to increase the canvas size to double the height of the navigation. Go to “Image > Canvas Size” in the box that opens pin the canvas to the top then increase the height to double the size.

Open up your hover state PSD file, repeat the steps above then paste the navigation onto your new document canvas. Place the hover state navigation underneath the normal state navigation leaving no gap in between.

Save the image as “Navigation.PNG” inside the same folder as your HTML file. If you wish to use your PSD background you will also need to make a slice over your background saving it as a separate PNG file.

Bringing It Together With CSS

Inside your CSS file start by styling the “BODY” and “CONTAINER”.

body {
padding: 0px;
background-image: url(bg.png);
background-repeat: repeat-x;
background-color: #ECEBEC;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#container {
margin: auto;
width: 600px;
}

In the “BODY” tag start off by setting all padding and margins to 0px apart from the top margin, we’ll add 20px of top margin which will push the navigation down from the top of our browser. Finally if your using your background from the PSD file then you’ll need to add the background as your body background image.

For the container DIV we simply set a margins to auto which will center our container, we can also set a fixed width for our container, 600px should be sufficient for the size of our navigation.

The next set of styles are for our navigation.

.navigation li {
float: left;
display: block;
list-style-type: none;
}

We’ll start with our navigation unordered list, simply float it left, display each list item as a block then remove the bullets points by setting the list style to none.

.navigation li a {
height: 53px;
width: 89px;
text-indent: -9999px;
display: block;
}

For our buttons links we set a fixed width and height. The width should be the same width as the buttons, if your buttons are different sized then it might be best to make sure they are all the same width. If you can’t make them the same width then you’ll have to set the fixed width in the classes button1, button2, button3 etc…

The fixed height should be the same height as your navigation. Don’t make the mistake of measuring the sprite.PNG image as you only need the height of one navigation not two.

Finally set the text indent to -9999px which will move the button labels off the page out of view.

li.button1 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: left top;
}

li.button2 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -89px top;
}

li.button3 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -166px top;
}

li.button4 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -249px top;
}

li.button5 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -334px top;
}

li.button6 {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: right top;
}

For each button class you need to set your navigation image as the background then using the background position property adjust the background position to show each button on the image.

If you wish you can merge some of the styles as they share the same property’s, if you wish to merge your styles then place the class on the same line separated with a comma. Here’s the same code for the classes but merged.

li.button1, li.button2, li.button3, li.button4, li.button5, li.button 6 {
background-image: url(navigation.png);
background-repeat: no-repeat;
}

li.button1 {
background-position: left top;
}

li.button2 {
background-position: -89px top;
}

li.button3 {
background-position: -166px top;
}

li.button4 {
background-position: -249px top;
}

li.button5 {
background-position: -334px top;
}

li.button6 {
background-position: right top;
}

The Hover CSS

The code for the hover state of the buttons are pretty much the same as the default state of the navigation, the only difference is the background position is set to bottom instead of top.

li.button1 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: left bottom;
}

li.button2 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -89px bottom;
}

li.button3 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -166px bottom;
}

li.button4 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -249px bottom;
}

li.button5 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: -334px bottom;
}

li.button6 a:hover {
background-image: url(navigation.png);
background-repeat: no-repeat;
background-position: right bottom;
}

Save your files and give it a whirl in your browser. You can view the live demo by clicking the button below.

Thanks for reading i’ll look forward to your comments.

http://bit.ly/bGh4kR

Be sure to check out Designious for more design resources.

Here is a preview of the brushes.

Download High-Quality Vector Brush Strokes

About the Artist

Designious Designious is a small design studio specialized in creating amazing vector art and design elements for designers

http://bit.ly/dpoAWs

  

Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve been investing more resources in the quality and relevance of our articles. We’ve also explored new formats; and on weekends we’ve been publishing more inspirational pieces, leaving the in-depth articles to weekdays.

We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. We are not big fans of lists either, but the format is useful and — if the resources are relevant — can be extremely helpful. Therefore, we’ve decided to add a couple of round-ups per month as a bonus to our regular articles. Instead of replacing the main articles, we will add round-ups on top of our regular schedule. If you don’t like round-ups or find them inappropriate, please feel free to skip them. How does this work for you?

In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

Tips, Hints, Navigation

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Contextual Slideout Tips With jQuery & CSS3
A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

jSquares
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Nav-o-Matic
Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

Jquery Two Sided Multi Selector
This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

jQuery MegaMenu Plugin

jQuery Keyboard Navigation Plugin
The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

FullCalendar – Full-sized Calendar jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS
A simple technique for creating radio button and checkbox switches with jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Sliding Labels
Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

Login or Signup with jQuery
Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

Uniform – Sexy forms with jQuery
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Slideshows and Galleries

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

Nivo Slider: Slideshow jQuery Script
Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

#grid
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

Improving The Content

Dynamic Footnotes With CSS and jQuery
Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

jQuery Captify Plugin v1.1.3
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

Layouts

Columnizer jQuery Plugin
This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

jQuery Grid Plugin

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

gMap – Google Maps Plugin For jQuery
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

10 jQuery Plugins for Easier Google Map Installation
The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

Images and Visual Effects

jQuery imageless buttons a la Google
This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

jQuery Presentation Plugin
jQuery Presentation Plugin: Say NO to Keynote!

jQuery pageSlide
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

Pines Notify jQuery Plugin
Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

Animate Panning Slideshow with jQuery
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

Last Click

CofeeScript
CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Brosho ‘Design in the Browser’ jQuery Plugin
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Is adding round-ups to our regular content a good idea?

What do you think, is adding more round-ups to our regular content a good idea?Market Research

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 5 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: javascript, jquery, tools

http://bit.ly/ak3VBc

Now we can make visible all our below layers and to pick up a nice color for our indicator. I´m going to use a very bright blue: #24fffc. This is just a matter of preferences and since we created vector shapes we can easily change their color in the future if we want to.

Now we´re going to scale our shapes down to make them fit inside our Dark Area using our “Light_Ambient” layer as the boundries of our transfotmation like so. Remember to hold down SHIFT and ALT keys while scaling

Now to get rid of the extra indicator at the bottom of our icon we can use 2 different techniques. We already saw how a Layer Mask can be very handy for that kind of visibility operations. However and since this two layers are pure vector shapes, we can take benefit of the tools provided by Photoshop to modify and transform shapes forms within Vector Layers. I´m going to show you this other technique.

First thing we need to do is to hide our “meter_shape02″ to have a cleaner vision of what we´re doing. Now we make sure our vector thumbnail from our “meter_shape01″ layer is selected (once again click on it and you will notice how the different contours of the vector content from layer are highlighted). Now we select the PEN TOOL by selecting it from the tools panel or by clicking the P KEY. Like we did when we substract the circle from our meter in the last step we need to set the PEN TOOL to that same behaviour and ensure that Shape Layers and not just Paths are selected as the default way the tool draw the objects.

Now, and once again using our guides and the boundries of our canvas as a reference we´re going to draw a triangle, starting from the center, then going to the bottom-left corner of our canvas, then to the bottom-right and finally by returning to the center of our guides like so:

Now, if you followed the instructions I provided for the degree rotation when creating our meter_shapes you will notice that there´s a little portion at the left-bottom and right-bottom parts of our indicator that aren´t totally hiden. You may consider that this could be a cool addition to the icon and you may want to leave it this way. However, for demonstration porpueses and going to get rid of those little squares too, just to show you how Direct Selection works inside Vector Layers composed by mutiple shapes.

So now, with our Vector Shapes still active we select our DIRECT SELECTION TOOL again (the white arrow) and we draw a nice selection of the bottom part of our triangle. This way we ensure we´re not selecting any other shape contained into the layer. Now we press CTRL/OPT+T to access the TRANSFORM TOOL and then by right-clicking we select the Scale option from the pop up menu.

Now we can transfrom its width by moving the horizontal sliders while holding the ALT KEY to force the transformation to start from the center or, as explained above, by setting around 105% the values for the width transformation in the TRANSFORM TOOL menu at the top of our window.

Now, depending on the rotation settings you used to create the “meter_shapes”, you may want or not to repeat this for the “meter_shape02″ layer. I think it looks just fine this way so I will leave “meter_shape02″ as it is but, again, it is up to you now you know the tecnique. Your icon should look like this:

Step 13: Creating the Icon – The Arrow Holder

Ok, now it is time to take care of the part that will hold our future arrow in the center of the icon. First we need to do is to select the ELIPSE TOOL and to set the Foreground Color to White – #FFFFFF. Now, and as usual, we´ll use our guides as a reference to draw a circle holding SHIFTand ALT keys while dragging from the center of our guides. Make it around 75px Wwide and high but this, of course, will depend if you´re creating a 512×512px or not. Otherwise, make it nicely proportioned with the rest of the icon. We may name this new layer “center_wheel_big”. Now we change its Layer Style like so:

Now we´re going to duplicate this “center_wheel_big” and rename it to “center_wheel_small” and using the TRANSFORM TOOL and as usual by holding SHIFT and ALT keys we´re going to scale down this new layer to around 20%. Now we´re going to change its blending mode from the current ones to just a Bevel and Emboss effect like this:

Now we select both, “center_wheel_big” and “center_wheel_small” and by holding SHIFT key we´re going to move down a little these two layers having in mind we have to leave enough room for the arrow we´re about to create. New position should be something like this:

Once we move our “center_wheel” shapes we can group them inside a folder and call this new folder “meter wheel” or something that just make sense to you. Now we´re going to add some subtle style to each one of the layers. Go to the Layer Style window for any of the two layers and insert the following values. Once we´ve accepted the modification we just can copy the Layer Style by right-clicking the layer from the layers panel and chossing Copy Layer Style and paste it to the other “meter_shape” layer by right-clikcing this second layer and chossing Paste Layer Style from the pop up menu

Step 14: Creating the Icon – Adding the Numbers

Now I think it would a good idea to add the numbers all around our Dark Area. Once we add them we´ll have a clearest idea about how room we have to add our arrow and how big it needs to be. So, like previous steps, this could be different for you depending on the font and the size you choose for the numbers. For this tutorial I´m going to use Myriad Pro Semibold as the font at 12px for the size and with a -40 for the letter tracking. I´m using the same color we applied to the “meter_shape” layers #24fffc.

It is up to you how many numbers you add and the difference between the values from one to another, just keep all numbers nicely aligned at the sides and evently distributed all across their way. Pay attention to for example the difference between two and three digits numbers and how this affect its position and alignment. Keep explorig until you find something you feel it´s working with the rest of the icon. I ended with this distribution:

Once we have our numbers aligned we can apply some glowing. Just select any number and go:

Like we did before we now can copy the Layer Style from this modified number and copy it to the others by selecting them all at once and chosing Paste Layer Style from the pop up menu that will show up.

Step 15: Creating the Icon – The Arrow

Now we´re going to create a new folder and name it “arrow” . We place it just below our “center Wheel” folder and hide this last folder to have a better view of our working process. We set our Foreground Color to a nice and vivid red like #f71d1d and pick the PEN TOOL. Then we draw an rectangled triangle using the numbers we just created and our vertical guide as a reference and placing its hipothenus side in the opposite side of our vertical gide like so:

Now with our PEN TOOL still selected if we press and hold CTRL/OPT KEY we have access to the DIRECT SELECTION TOOL which can be used to easily reshape our vector form and set appropiate proportions to our arrow. In convination with the TRANSFORM TOOL we can scale, reposition, rotate and reshape our arrow until we find a position and a shape we´re comfortable looking at and that fits with the overall look of our icon. Since we´re manipulating a vector object we´re not going to lose any quality in the process, no matter how many times we transform our shape.

I did a little reshape to make it more simetric and also rotate it to make the arrow point at middle-lower values. I placed the arrow as follows:

Now we rename this layer to “arrow_shape01″ and apply the following Layer Style to it:

Now we duplicate our “arrow_shape01″, rename it to “arrow_shape02″ and we place it below our “arrow_shape01″. Now we clear its Layer style change its color to a darker red like #d20000 and move it by hitting the LEFT ARROW KEY once and the DOWN ARROW KEY twice from our keyboard

Now we´re going to add some lighting to our arrow by selecting the POLYGONAL LASSO TOOL ( L KEY ) and we´re going to create a selection like this:

Now we create a new layer above our “arrow_shape01″, name it “arrow_light”, press the D KEY, then X KEY to get back to our default colors and to set our Foreground Color to white, then we switch to the GRADIENT TOOL and with the following settings we draw a gradient like so:

Deselect your current selection. Now CTRL/OPT+CLICK on the thumb from the “arrow_shape01″ (the one is on top) and press CTRL+SHIFT+I to invert the selection, then hit BACKSPACE to clear those pixels. Now we low the opacity of this layer down to around 50%. We can make visible our “center wheel” folder now. Your image should look like this:

Step 16: Creating the Icon – The Counter

In this step we´re about to create the counter that displays the numbers simaluating a total count of whatever your meter is counting. First thing we need to do is to create a new folder and name it “counter” and place it above all existing layers. This is where our layers for this part will lay. It should be a good idea to hide our “center wheel” and “arrow” folders.

Now we change our Foregound Color to #111111, select the RECTANGLE TOOL and, using our guides as a reference point, draw a nice and proportioned rectangle by holding down ALT key while draggind our shape. Make it around 150px wide and 30px high like so:

Now go to add some Layer Style using the following values:

Rename this layer to “counter_shape01″ and duplicate it. Then rename the duplicated one to “counter_shape02″. We leave it above our “counter_shape01″. Now we set its fill to 0% and change its Layer Style to the following:

We can now make visible our below layers and, while holding the SHIFT KEY, move down the “counter” folder to an appropiate posotion like so:

Again I´m going to use Myriad Pro Semibold font for the numbers inside the counter. This time at 11px and with a letter tracking of around +130 to leave enough room for the sepearators we´re about to create. I entered 8 numbers and as usual we can take benefit of the TRANSFORM TOOL to align the row of numbers at the middle of the canvas (and the counter shape too). Now for the numbers we´re going to add the following Layer Style:

Now your image shoudl look like this:

Final step is to add the separators between the numbers. To do that we´re going to set our Foreground Color to #ffffff and we´re going to select the line tool, setting its weight to 1px. Now holding SHIFT KEY and between our first two numbers we´re going to draw a line using or “counter_shape” as a reference for its height. We can name this new layer to “single_separator01″.

Now we´re going to press CTRL/OPT+T to acces the TRANSFORM TOOL and holding down the ALT KEY we´re going to scale down its height to around 80%.

Now we´re going to add some layer style to our separator:

Now we´re going to repeat this process to create the other separators by duplicating our “single_separator01″ keeping an eye on the amount of space between numbers and ensuring we align each new separator at the middle of that space. Your image should look like this:

Step 17: Creating the Icon – Adding some more Lighting Details

We´re very close to finish the icon, actually we are not going to add any more objects to it. Instead, we´re going to make our icon more interesting by adding some more lighting details.

First we need to create a new layer between our “arrow” and “center wheel” folders and name it “light_focus”. This layer visibility will affect the arrow and all layers below but not our “center wheel” objects and above layers so this way we can play a little more with shadows and lights we already created for some of the objects laying on top of this layer.

Now we´re going to select our BRUSH TOOL again and with #ffffff color selected and with a brush diameter of around 300px and a hardness of 0%, we´re going to make a single click at more or less the following postition:

Now we change the Blending Mode for this layer from Normal to Overlay and we set the opacity down to around 50%. Now, and as seen in previous steps, we´re going to CRTL/OPT+CLICK on our “base_black” layer, then press CTRL/OPT+SHIFT+I to invert the selection and hit BACKSPACE to remove the possible extra pixels going out of bounds our Dark Area.

Now your image should like like this:

Good!. Now we could add some inner shadow to the Dark Area of our icon where the numbers and all the meter elements are laying. To do that we´re going to create a new layer just in top of all current layers and name it “inner_shadow”. We could just use the Inner Shadow effect from the Layer´s Style but we´re going to create our own effect by making some brushing instead. The reason for this is that the pre-made effect from Photoshop is too much perfect in my opinion since it is all generated from the edges to the center. We can make some tweeking to it but to get the effect we´re looking for we want our icon to look iluminated with some irregularities and to achieve that effect we want our shadow to be more “imperfect”.

So, once again, we CTRL+CLICK on our “base_black” layer, select the “BRUSH TOOL” and with our Foreground Color set to #000000 and a Diameter of around 300px and a Hardness of 0% for our tool, we start brushing all around our icon like so:

Once we finish the brushing we can now press CTRL/OPT+D to deselect our current selection and set the Blending Mode for this layer from Normal to Soft Light leaving its Transparency at 100%. Now your image should look like something similar to this:

Last thing is to add our main shadow, the one will simulate that the icon is standing on an surface generating its own shadow as a reaction of the lighting is coming from above. So, to do that, we´re going to create a new layer at the top of our locked Background layer and name it “main_shadow”. Now we select the ELIPTICAL MARQUEE TOOL and using our guides as a reference and holding the ALT KEY we draw our selection from the center to the sides like so:

Now holding SHIFT KEY we can move our selection to the bottom of our icon. For now, make the bottom the selection to match the bottom of the icon. With our Foreground Color set to #000000 we select the PAINT BUCKET TOOL by selecting it from the Tools Panel or by pressing the G KEY and we click over our selection to fill it with black.

Now we can deselect our current selection and go Filter/Blur/Gaussian Blur… and set the value for the RADIUS about 10px. We click Ok and go Filter/Blur/Motion Blur…and this time we choose 0 degress for the ANGLE and about 120 for the DISTANCE and click OK. Now we can move down our shadow to show up a little more of the darkest area at the center. Now if we press CTRL/OPT+T we can see something to keep an eye on:

Notice where our TRANSFORM TOOL is drawing the boundries of our shadow?. It is indicating that our shadow is getting out of bounds of our canvas and that means if we save the icon as it is, specially as a PNG, that little part of the shadow placed outside our canvas will cause our icon to appear cutted at the bottom. This is a very common mistake when dealing with icon shadows and it is always a good practice to make sure our bottom shadows are not exceding the limits of the canvas even when they look just fine. Most of the shadows are very subtle at their endings and it´s easy to not to see that cropping issue until you export your icon as PNG.

Ok, so to fix this we´re just going to scale down a little our shadow using our TRANSFORM TOOL box to fit the shadow into the boundries of our canvas. Now you´re image should look like this:

Step 18: Creating the Icon – Final Touches

Now we could add the text that will indicate in some way the kind of meter we´re looking at. I originally created this icon as a server traffic indicator and I used the words “SERVER TRAFFIC and KPS” to make it more obvious but you can use your own creativity or imagination to make the icon indicates whatever you wish to show. For the text I used Myriad Pro Semibold font, all caps and this time at 3,16 px and placed at the center of the icon using my guides as a reference. I set the paragraph style to align text at the center as well. I putted these text layers inside a folder calles “text”. I also moved the text down a bit for a better positioning just like so:

We´re almost done!. The last step of this tutorial is very important. We´ve spent a lot of time creating the shapes, aligning them correctly and making the icon to look proportioned and nice but we didn´t pay much attention to one of the most important things when creating icons: COLOR.

Now, since we´re not going to make use of the guides anymore we can just press CTRL/OPT+H to hide them and to have a better view of the adjustments we´re about to do.

Let´s make our icon more vivid and easy to the eyes by just adding some adjustment layers in combination with layer masking. One of the advantatges of this way of working is that you can easily modify the global appearance of your icon without the need of go looking for specific layers to change the color for a certain effect or shape

So, first we´re going to create a new folder just at the top of all our existing layers and name it “color adjustment”. Now and for the last time we´re going to CRTL/OPT+CLICK on the “base_black” layer to create a selection of the Dark Area of our icon where the main color adjustment will occur. Now inside the folder we just created we´re going to click the Add layer mask button located at the bottom part of our layers panel

Now we´re going to add a new Brightness and Contrast adjustment layer by clicking on the Create new Fill or Adjustment Layer button located at the right from the previous Add layer mask button. We select Brightness and Contrast from the pop up menu. Now we´re going to set the BRIGHTNESS value to around 30 and the CONTRAST to around 60.

Now we´re going add a levels adjustment layer by repeating the previous process but this time choosing Levels from the Create new Fill or Adjustment Layer menu. This setting may differ if you are using different colors for your numbers and “meter wheel” shapes. Since we used a light blue color in this tutorial we want our icon to look a little “bluish” simulating that some light is emerging from the icon and it is affected by the color of the inside elements. So for this new Levels Layer we´re going to use the following values: RGB channel should be set around 8, 1 and 238 for the first, second and thrid slider respectively. for the RED CHANNEL should be around 11, 1, 255, GREEN CHANNEL will remain untouched and for the BLUE CHANNEL we go 0, 1, 240.

Now if you followed along this tutorial using the same settings your final image should look something similar to this:

Step 19: Conclusion

Besides the creation of the icon, my intention with this turotial was to show you some principles and good practices when facing icon design. First is to keep all your shapes correctly aligned using guides and by making transform operations percentually using the tool that Photoshop is offering to us.

Another good practice is to keep your work as much simple as you can, and to use all the nice features Photoshop has like we did with our personalized action. They only thing we need to know is what we want to achieve and which tools can make our life easier to make our idea happen.

Download the Source Files

http://bit.ly/dbnGIw

http://bit.ly/cOZBmX

Blaxploitation is a film genre that emerged in the United States in the early 1970s when many exploitation films were made that targeted an audience of urban black people; the word itself is a portmanteau of the words “black” and “exploitation.” Blaxploitation films were the first to feature soundtracks of funk and soul music. These films starred primarily black actors. Variety magazine credited Sweet Sweetback’s Baadasssss Song with the invention of the blaxploitation genre. Others argue that the Hollywood-financed film Shaft is closer to being blaxploitation, and thus is more likely to have begun the genre – Wikipedia.

For this post we have selected some great examples of posters from this genre and period. Also, if you have more examples of blaxplotation posters, share with us via email or comments.

http://bit.ly/brM1GM

Introduction

Here’s an example of echoing out some information from a folder, using the traditional opendir() function.

	$dir = "/etc/php5/";

	// Open a known directory, and proceed to read its contents
	if (is_dir($dir))
	{

		if ($dh = opendir($dir))
		{

			while (($file = readdir($dh)) !== false)
			{

				echo "filename: $file : filetype: " . filetype($dir . $file) . "n";

			}

			closedir($dh);

		}

	}

That should look somewhat familiar. We can massively shorten the code above with:

	$dir = "/etc/php5/*";

	// Open a known directory, and proceed to read its contents
	foreach(glob($dir) as $file)
	{

		echo "filename: $file : filetype: " . filetype($file) . "<br />";

	}

Isn’t that much easier? Eager to learn how the method works? If yes, then let’s get on with it.

glob() supports a total of two arguments, with the second argument being optional. The first argument is the path to the folder, however, it’s a bit more powerful than that.

Step 1. The First Argument

This first argument supports a pattern. This means that you can limit the search to specific filetypes or even multiple directories at the same time by using multiple asterixes “*”. Let’s assume that you have a website that allows users to upload images (just because I just read this). Each user has his/her own folder within the folder “userImages.” Inside these folder are two additional folders, called “HD” and “TN,” for high definition (full-sized) images, and for thumbnails. Let’s imagine that you want to loop through all your users’ “TN” folders and print the filenames. This would require a relatively large snippet of code if you were to use open_dir(); however, with glob(), it’s easy.

	foreach(glob('userImages/*/TN/*') as $image)
	{
		echo "Filename: " . $image . "<br />";
	}

This will search userImages/any/TN/any and will return a list of the files that match the pattern.

	Filename: userImages/username1/TN/test.jpg
	Filename: userImages/username1/TN/test3.jpg
	Filename: userImages/username1/TN/test5.png
	Filename: userImages/username2/TN/subfolder
	Filename: userImages/username2/TN/test2.jpg
	Filename: userImages/username2/TN/test4.gif
	Filename: userImages/username3/TN/styles.css

We can even take things a step further, and be more specific by including a file format in our foreach statement:

	foreach(glob('userImages/*/TN/*.jpg') as $image)
	{
		echo "Filename: " . $image . "<br />";
	}

Now, this will only return Jpegs.

	Filename: userImages/username1/TN/test.jpg
	Filename: userImages/username1/TN/test3.jpg
	Filename: userImages/username2/TN/test2.jpg

It gets even better. What if, for instance, you require Jpegs, but also Gifs; nothing else? Or what if you want to print only folder names? This is where the second argument comes into play.

Step 2. The Second Argument

The second argument is, as mentioned previously, optional. It does, however, provide a very nice set of optional flags. These will allow you to change the way your glob() behaves.

Flags

• GLOB_MARK: Adds a slash to each directory returned
• GLOB_NOSORT: Return files as they appear in the directory (no sorting)
• GLOB_NOCHECK: Return the search pattern if no files matching it were found
• GLOB_NOESCAPE: Backslashes do not quote metacharacters
• GLOB_BRACE: Expands {a,b,c} to match ‘a’, ‘b’, or ‘c’
• GLOB_ONLYDIR: Return only directory entries which match the pattern
• GLOB_ERR: Stop on read errors (like unreadable directories), by default errors are ignored

As you see, the potential requirements that we noted at the end of Step 1 can easily be fixed with GLOB_BRACE:

	foreach(glob('userImages/*/TN/{*.jpg,*.gif}', GLOB_BRACE) as $image)
	{
		echo "Filename: " . $image . "<br />";
	}

which will return this:

	Filename: userImages/username1/TN/test.jpg
	Filename: userImages/username1/TN/test3.jpg
	Filename: userImages/username2/TN/test2.jpg
	Filename: userImages/username2/TN/test4.gif

If we wish to only print subfolder names, we could use GLOB_ONLYDIR:

	foreach(glob('userImages/*/TN/*', GLOB_ONLYDIR) as $image)
	{
		echo "Filename: " . $image . "<br />";
	}

which will print:

	Filename: userImages/username2/TN/subfolder

Conclusion and One More Example

This method has been available since PHP 4.3, however, it’s not used very often, strangely. I didn’t learn it until quite late myself. Now, I often use glob() when loading plugins into my framework:

	foreach(glob('includes/plugins/*.php') as $plugin)
	{
		include_once($plugin);
	}

That’s all; I hope you enjoyed this quick tip, and let me know if you have any questions!

http://bit.ly/dD8gvo