1stwebdesigner - Graphic and Web Design Blog » tutorial

jQuery Mobile – What You Need to Know

Rochester Oliveira — Mon, 30 Jan 2012 10:00:22 +0000

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives

Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!

Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure

Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

jQuery Mobile stylesheet
jQuery JS
jQuery Mobile JS

So your code will look like:




	Starter page
	
    
    
	
	
	


	
		
			Header
		
		
			Lorem ipsum
		
		
			Footer

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components

jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:




	Starter page
	
    
    
	
	
	


	
		
			Header
		
		
			Lorem ipsum
			 Second page
		
		
			Footer
		
	
	
		
			Header second page
		
		
			I'm second page!
		
		
			Footer second page

Navigation, Lists, Form & Dialog Components

Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
data-role=”fieldcontain”: This is a container for form elements
select data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
select data-role=”slider”: Creates a “on / off” slider, useful for options pages
input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

Home screen will have a dialog box
Form elements page will use all we have mentioned
List page will have a searchable list so you can try it
Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:




	Starter page - 1stWebDesigner.com
	
    
    
	
	
	


	
		
			Alert element
		
		
			Open alert
		
		
			
				
					Form Elements
					List element
				
			
		
	
	
		
			Form elements
		
		
			
				Choose:
				

				Select slider:
				

				Input slider:
				

				Email Input:
				

				Number Input:
				
			
		
		
			
				
					Home
					List element
				
			
		
	
	
		
			This is a list
		
		
			
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Aliquam vitae leo metus, quis suscipit nulla.
				Maecenas accumsan urna sit amet justo commodo accumsan.
				Nulla vitae lacus augue, vel eleifend tellus.
				Integer at ligula turpis, at fermentum nisl.
				Nam dapibus risus at massa sagittis egestas.
				Praesent hendrerit purus vitae enim faucibus tincidunt.
				Curabitur sit amet lectus neque, id facilisis elit.
			
		
		
			
				
					Home
					Form element
				
			
		
	
	
		
			Alert!
		
		
			I'm alert page!

Custom font embedding

Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images

You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!

Remove components

We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all.

The good news is that you can easily remove them, by making your own build :)

Now it’s your turn?

So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

Create a Classic-Styled Portfolio Design in Adobe Photoshop

Dillen Verschoor — Fri, 27 Jan 2012 21:00:15 +0000

Howdy, today we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way. Here is what we will be making:

Resources for this tutorial

Icons from Iconsweets
Sample images for the center image
PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document

Start by creating a 1600px x 1600px document in Photoshop.
Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
Rulers: Ctrl + R
Guides: Ctrl + ; or Ctrl + H
The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
So repeat the step again twice, but now with the value of: 640px and 960px.
So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider

We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.

I used the one above at 20% opacity.
Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
Hit OK and there is your pattern.
Opacity = 3%.
Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider

So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool. The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
Add another pattern overlay with the same pattern.
Opacity is about 15%.

Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow Inner Shadow Color Overlay

Just a solid black #000000
Blending options right arrow.

Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content

The content starts with a 3 column showcase of text about your website.
If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
The lorem text also is open sans, but now it´s 12px.
Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow Inner Shadow Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer

First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4. That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!

Create A Sleek Music Player In Adobe Photoshop

Davey Heuser — Thu, 19 Jan 2012 21:00:15 +0000

In this tutorial you’ll learn how to make a beautiful music player in Adobe Photoshop. It is important that you take the time when you are designing and do not rush things. I focused on the details so I invite you to look at every little thing carefully and think about why I did it and how you can learn from it! Good luck!

Final product:

What you’ll need:

Subtle patterns
Iconsweet 2
Music player icons
Picture of Nadia Ali
Helvetica neue 55 roman
Helvetica neue 65 medium

PSD Download

Click me!

Prepare your tools

Okay so let’s begin! The canvas size depends on the size of your music player, my canvas is
1000 x 500px. Please make sure that you are using 72dpi before you create your new canvas.

You should have a nice canvas size to work with now, but if you’ve looked closely at the end
result, I’ve used a pattern on the background. Here’s where you’ll need the subtle patterns, load
the .pat file and pick a pattern you like and reduce the opacity.

Now that we know what the background looks like, we can make a nice color palette.

Start designing the player!

Let’s start by creating the base of the music player. Grab your rounded rectangle tool (U) and
make sure that the radius is set to 3px. I’ve used a gradient for the stroke because the bottom of the player would’ve ended up looking blurry.

These are the blending options I used:

#000000 drop shadow

#FFFFFF inner shadow

#f7f7f7 to #ebebeb reversed gradient

#bcbcbc to #d4d4d4 stroke gradient

You should have a pretty nice background for our player now, but there’s something missing. So let’s make it more glossy!

Select the rectangular selection tool (M) and make a selection at the bottom of the music
player’s background. Now that you’ve made a selection we can select the gradient tool (G), grab one color for the gradient and keep the other one transparent to accomplish a nice glossy effect.

You can deselect (cmd + d / ctrl + d) your selection after you made the gradient, since the layer underneath the gradient has a gradient overlay it’s not possible to make a clipping mask. So what we basically do is make a selection of the layer underneath and select inverse, you can
make the selection by ctrl or cmd click the box which I gave a red stroke.

What you should have this far

Lets make the album cover

You will need to use the first two colors of our palette to make the gradient of the background of the
album cover. Duplicate the background layer of our music player and make sure you put the
layer above the player’s background and glow. Rasterize the layer and make a nice square
selection, select inverse and press delete. You should have something like this:

But hey – wasn’t the background of the album cover blue?! Yes it is, so now we have to disable the layer styling and start adding new blending options.

#ffffff inner shadow

#2961aa to #45a6fa gradient

#1c5297 stroke

Now that we have the base ready we can design the picture frame, just grab your rounded
rectangle tool and make a nice square frame. Please make sure that you give the picture frame area to breathe, I gave my cover a 20 pixel margin on all sides. We will have to use the blending options panel again to give the picture frame a nice border.

#3379c6 drop shadow

#2961a9 inner glow

#164c91 stroke

Great! the frame is ready so now we can add a nice picture of Nadia Ali, just open the image with Photoshop and create a clipping mask, resize the image where needed. But we are not ready yet, we still need to add the glare, select your pen tool and make a nice curve, fill the path (#FFFFFF) and reduce the opacity to 20%.

The last thing you have to do is make a group of your album cover section, select the layers that are related to the album cover and press cmd or ctrl + g, rename to group to whatever you want.

What you should have this far:

Making the controls

What is a player without controls, right? So we are going to make a nice play/pause button, previous and next buttons.

Select your Ellipse tool(U) and drag a nice round circle, make sure that you hold shift. This first circle will be the blue stroke around the pause button, the requires some blending options.

#000000 inner glow

#2961aa to #45a6fa gradient

#1c5297 stroke

Okay we have a nice blue circle now, just make a new circle on top of that circle with some
spacing on all sides. this circle will only need a gradient overlay.

#e8e8e8 to #f6f6f6 gradient

Now you have to add a nice icon to the button to make it look like a play/pause button. Add a nice gradient and inner shadow to the icon.

#000000 inner shadow

#e8e8e8 to #f6f6f6 gradient

The play/pause button should be done by now. Now we’re going to make the previous and next buttons, these buttons require the same styling as the play button, so copy the layer style and paste it on those icons.

Also add these layers to a group and call it ‘Controls’.

What you should have this far:

Give the song a name

This step only requires 2 layers. This step can be accomplished with one single layer but I
personally prefer to make two separate layers.

The text color of the artists & song title is #2c69b4, the font size of the artists is 18pt and the font size of the song title is 12pt. Both are Helvetica neue 55 roman, and both layers have a white 1px drop shadow.

What you should have this far:

Making the love and repeat button

Make the love button

Let’s start with the love button, the love button has a nice orange gradient when hovered or
activated. Make a button with a nice size with the rounder rectangle tool, please be aware of the icon that we have to be put in later.

Now that you have a rounded rectangle shape you’re ready to give it some blending options.

#FFFFFF drop shadow

#FFFFFF inner shadow

#db5825 to #ea6733 gradient

#bd530d stroke

You should have a nice orange button if you’ve done this, but it’s not shiny enough, so we are going to repeat the step that we did to make the glow for the background and it should be fine.

Now it’s time for the icon to take place, take the custom shape tool (U) and find the heart shape, make sure that you hold shift while you make the icon. After you’ve done that, make sure that it’s white so that we can add a nice inner shadow to the icon.

#bf540f inner shadow

Make the repeat button

Okay so now we have the love button. Add the layers that belong to the love button to a group, rename the group to ‘like button’. Duplicate the group and call the group ‘Repeat button, because the button is almost the same as the love button, we only have to redo some blending options.

Remove the heart icon and add a nice repeat icon to the button, also this icon has to be white (you can always make it white by color overlay).

On the button:

Replace inner shadow color with #FFFFFF and reduce the opacity to 25%
Replace the gradient with #d3d3d3 to #e2e2e2
Replace the stroke color with: #c1c1c1

On the icon:

Replace the inner shadow color with #c1c1c1

What you should have this far:

Make the track length bar

The track length bar we’re going to make has a stream, buffered stream and a played track. But we are going to start off by writing the track length text.

The track length text is written in 2 different colors the passed time text is #717171 and the
complete track length is #2c69b4. Add a 1px white drop shadow to the text and you’re done.

Total track

Make sure that you give this bar 20px margin from both sides to make it align well. Make a
shape with the rounded rectangle tool.

#000000 inner shadow

#000000 inner shadow

#e0e0e0 to #f1f1f1 gradient

#f8f8f8 stroke

Buffered track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. Make sure that you change the angle of the gradient to 180 degrees.

#FFFFFF inner shadow

#e8e8e8 to #f6f6f6 gradient

#8faed6 stroke

Played track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.

Crank up the opacity of the gradient to 100%
Give the stroke the color #1c5297

What you should have this far:

Design the tracklist

Designing the background of the track list is simple, it’s simple because you can just copy the layer style & glow from the background of the player. Just make a wrapper for the theme songs with the rounded rectangle tool and paste the layer style on the layer and don’t forget to add the glow.

Now we only have to display the songs, make another rounded rectangle and make sure that you have 20 pixels free space from both sides. This one will look a a bit different from the others, so you can’t copy a layer style. Please make sure that the background of the shape is white, otherwise the gradient won’t work.

#FFFFFF outer glow

#e1e1e1 inner glow

#d7d7d7 to #b4b4b4 reversed gradient

#d4d4d4 stroke

Add the number of the song, and full name of the song in that rectangle and give the text the color #717171 and 1px white drop shadow. This is the same styling that you need to add to the track length indication.

Duplicate the love button and place it in the track’s shape, copy all the layer styles of the repeat button (or you can leave it this way if you want it to stay orange).

Add all the layers that belong to the track to a group.

What you should have this far:

Duplicate this group 3 times and place them underneath each other with a 10 pixel margin. You are almost done now, the only thing that we need to do is design the current song indicator. Pick one song and do the same thing as we did with the background for the album cover and add a Now playing text. This text is written with Helvetica neue 65 medium, has a white color and has a 1px #1c5297 drop shadow.

Yay we’re done! I hope you’ve enjoyed reading this tutorial and I highly recommend you to
make your own suggestions to make sure you’ve understood everything well.

Final result

And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!

Create a Web Hosting Landing Page in Adobe Photoshop

Michael John Burns — Thu, 29 Dec 2011 21:00:34 +0000

In this week’s tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial.

So let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1470px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

Rulers: Ctrl + R
Guides: Ctrl + ;

Also one important thing when using Ruler Tool is the Info(Information) Panel. Use this when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide and change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Background

Header and Slider

Starting at the top of the canvas select Rectangle Tool(U) and create a 100% by 470px fill it with #1560d5.

Based on the screenshot, our background will contain grid patterns, so let’s create that. Open up a new window and create a 100px by 100px with a Transparent background. Select Pencil Tool(B) and set the size to 1px then, create an L shape as shown in the screenshot below. Then go to Edit – Define Pattern

Create another pattern using the L shape, but this time make it 20px by 20px.

Now that we have our pattern, create two new layers. For the first layer fill it with the Big Pattern using Paint Bucket Tool(G) and from the drop down list on the options panel set it to Pattern then select the Big Pattern. Then set the Layer Mode – Softlight 50%. On the second layer fill it with the smaller pattern, Softlight 20%.

Result.

Using Rectangle Tool(U) create a 100% by 100px fill it with #111111.

Content & Copyright

Just fill the background layer with #ededed.

Footer

Using Rectangle Tool(U) create a 100% by 260px fill it with #1560d5. Place it 60px upwards starting from the bottom of the canvas.

Step 3: Working on Logo and Navigation

Create a 906px by 60px shape using Rounded Rectangle Tool(U), Radius 3px and fill it with #111111. Place it 50px starting from the top.

Apply This Blending Option

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Stroke:

Result!

Logo

We will make a temporary logo. Using Text Tool(T) put up the site name. For this example just use Arial 24pt.

Drop Shadow:

Bevel and Emboss:

Result!

Add a slogan using the same tool. Font will be Museo 12pt color #777777.

Result!

Navigation

Using Text Tool(T) add your links. Use Arial 14pt color #777777, the active link color will be #ffffff. Each link will have 21px distance on the left and right. Measure it using Ruler Tool(I).

Next we will add a divider to make the links separate. Using Line Tool(U) create a 1px black Line. Place it at the center as shown in the screenshot below.

Merge all the shapes and duplicate it. Apply a #393939 Color Overlay. Move the layer 1px from the right. Now apply a Mask by clicking the mask icon at the layers panel. Now using Gradient Tool(G) black and white. Fill the mask starting from the bottom of the shape towards at the middle.

For the hover effect the font will be white, then it will have a bottom border 2px color #d8d50d.

Step 4: Working on Slider

Create a 10px guide to the right. Using Text Tool(T) put up a dummy heading and text. For the heading I used Oswald 30pt color #ffffff and #efef14. For the paragraph I used Arial 12pt color #e2defd.

Select Rounded Rectangle Tool(U) Create a 180px by 50px rounded rectangle set the Radius to 3px and color to #eae70e.

Apply This Blending Option

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Result!

Next we will add the arrow icon and the text. For the text I used Oswald 18pt color #ffffff and color #9a9603 for the bevel look. For the arrow icon find an arrow from the selection using Shape Tool(U).

For the rounded circle just create a 30px by 30px using Ellipse Tool(U) set the Fill to 0% and apply a 3px stroke inside. For the bevel looking look just duplicate the layers and make the original layer color to #9a9603.

Next adding the controls. Just create a 12px by 12px white circle and set the Opacity to 50%. For the active one just leave it white. For the cpu/servers just grab some stockphotos.

Step 5: Working on News Letter Sign Up

Grab a mail icon from wefunction icon set and place it as shown. For the Heading text I used Museo 500 18pt color #ffffff. For the Paragraph I used Arial 14pt color #777777.

Next we will create the news letter input and button. To start create a 300px by 40px shape using Rounded Rectangle Tool(U) Radius 3px, set the fill color to #f2f2f2.

Apply This Blending Option

Inner Shadow:

Label it with text Arial 12pt color #555555.

Next using Rounded Rectangle Tool(U) with the same radius create a 90px by 40px shape. Fill color will be #1560d5. Once the shape is in place using Direct Selection Tool(U), Delete Anchor Point and Add Anchor Point create a shape as shown in the screenshot below.

Apply This Blending Option

Inner Shadow:

Gradient Overlay:

Stroke: #0341a2, #1560d5

Label the button with “SIGNUP” using Text Tool(T) color white and for the bevel look color will be #0342a3.

To finish this button using 150px Soft Brush color #ffffff. Click once in a separate layer and transform it as shown in the screenshot below. Then, set the Layer Mode – Softlight.

Result

Step 6: Working on Main Content

The main content will contain Package Table & About Us. Let’s work first on Pricing Table.

Pricing Table

Using Rounded Rectangle Tool(U) with the same Radius, create a 690px by 330px shape and add a 1px stroke color #c3c3c3.

Using the same tool create a 690px by 55px shape with a fill color of #1560d5. Make the bottom part not rounded, and also apply the same blending option as we did in our sign up button.

Let’s divide our table into 3 columns 690 / 3 = 230px each column, so go ahead and measure it using Ruler Tool(I) then add a 1px line using Line Tool(U) color will be #c3c3c3.

Now let’s add data in our table. Each table data will have a 40px of height, white for odd and #f5f5f5 for even. For the text I used Arial 12pt color #555555.

Next let’s create a button for each column. Button size will be 100px by 30px, the same font but font size is 13pt. For the styles just copy what we applied on sign up button and add this blending option.

Drop Shadow:

Apply also the highlights effect that we did previously.

Now let’s work on the header part. Using Line Tool(U) create a 1px line color will be #0341a3. Next, using Text Tool(T) add the heading text as shown in the screenshot below.

Apply the highlights effect.

About Us

Using Text Tool(T) add the heading text and paragraph. For heading font will be Museo 18pt color #2c2c2c, and for the paragraph Arial 12pt color #555555.

Step 7: Working on Sidebar

The sidebar will contain a blocks. Let’s work first on the first block

Services

Using Rounded Rectangle Tool(U) create a 250px by 225px shape. Apply a 1px inside stroke color #c3c3c3.

Next open up wefunction iconset and grab 3 icons resize it and align it as shown in the screenshot below.

Testimonials

Using the same tool create a 250px by 220px shape with a fill color of #111111. Apply a 1px inside stroke color #000000. Refer to the screenshot below for the text format and colors.

Step 8: Working on Footer

The Footer will be divided into 4 columns Quick Links, From the blog, Quick Contact, and Follow us. Each column will have a 20px distance from the right except for the last one.

Quick Links

The width will be 320px. The will contain two column of links each column will have a width of 150px and a distance of 20px.

From The Blog

The width will be 300px. Using Rectangle Tool(U) create a 49px by 49px shape. Beside it 20px from the right will be the post title and date published.

Quick Contact

Width will be 150px, the same text and spacing.

Width will be 130px and place the social icons as shown in the screenshot below.

And lastly add the copyright text on the bottom left part and links on the bottom right part. Font will be Arial 11pt color #555555.

Finally We’re Done!

I hope you learn something from this tutorial and I hope this helps. If you have questions feel free to drop it below. Happy Holidays everyone. Godbless!

4 Simple Steps To Make Silhouettes Using Photoshop

prit — Wed, 21 Dec 2011 21:00:39 +0000

Silhouettes as an art form originates back to as early as 18th century drawing its name from a French minister Étienne de Silhouette who imposed heavy economic cuts on French people. Quite symbolically austere outline portraits which became popular in the same time period started to be referred as Silhouettes.

Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration

Silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch

Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan

Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Step 4: Digitally Enhance

Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

b. Fill the outline with the same color.

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

Creative Christmas Gift For Geek Lovers – Web & Mobile App

Rochester Oliveira — Wed, 21 Dec 2011 10:00:58 +0000

Oh, Christmas. The magic time when you spend all the money you’ve been saving the whole year. Oh, and we have all that Christmas Spirit, of course.

Now, you probably want to spend a lot on your soul mate’s gift, to show her how deep is your love.

Yeah, money can buy cool things, but guess what: almost every year I make my own gifts for my girlfriend (but I always have to buy something else anyway). And I feel that she just loves when I do something by myself instead of just buying it (unless shoes, she wouldn’t like if I made her a shoe). So I’ll show you, dear Padawan, how to make a cool one-page-gift for anybody that you like.

Our goal here is to do a simple “slider”, where a lot of messages and pictures that you like are shown. In the meantime you’ll learn a little bit about design, jQuery and CSS3.

So, let’s rock!

Demo & Download

This is our final effect. You can check out our live demo and download our source files and start playing with it.

Design stuff

First of all we’ll need a cool background. Snow is not an option for me, since in Brazil we barely know what it’s like. So I’d rather pick a cool christmas tree and change it a little. I’ve found a couple of cool images to use in
Salman’s article full of Christmas resources. I’ve chosen one of them, adjusted its colors, sliced its background and cut the Christmas tree itself.

As our effect’s start point (slider and this stuff) we’ll use a rocking tutorial on how to do an Amazing Slideshow (John Lennnon Tribute). We’ll change it a little bit, but the main effect is just amazing :)

Now we need a good looking font for our design. I suggest you to go with Cartoon. Then just generate its webfont and we can include it in our basic HTML (that one downloaded from Rocking Code).

Our basic HTML will be like this:







Happy Christmas!









Happy Christmas!



Caption text.

[... more .item divs]

And basic CSS:

body {
	background: #feffef url("../img/bg.jpg") repeat-x center bottom;
 }
 #tree {
	position: relative;
	width: 100%;
	height: 100%;
	background: #feffef url("../img/bg-tree.jpg") repeat-x center bottom;
 }
#container {
	position: relative;
	width: 880px;
	margin: 15px auto;
	padding: 20px 20px 20px 30px;
	background-color: transparent;
	background-color: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff)";
	-moz-box-shadow: 0 0 5px #B8B8B8; /* Firefox */
	-webkit-box-shadow: 0 0 5px #B8B8B8; /* Safari, Chrome */
	box-shadow: 0 0 5px #B8B8B8; /* CSS3 */
}
	#container h1 {
		font-family: 'CartonSlab';
		font-size: 20px;
	}
	.item {
		position: relative;
		padding: 0;
		width: 200px;
		margin-bottom: 20px;
		float: left;
		background: #000;
		overflow: hidden;
	}
		.item img {
			width: 100%;
			cursor: pointer;
		}
	.selected {
		border: 2px solid #fff;
		-moz-box-shadow: 0 0 3px #000; /* Firefox */
		-webkit-box-shadow: 0 0 3px #000; /* Safari, Chrome */
		box-shadow: 0 0 3px #000; /* CSS3 */
	}

As you may have noticed, our tree is done with a different HTML element, so it won’t affect our slideshow effect at all.

Oh, and don’t forget to generate favicons. They are really cool.

Setting up pictures and captions

One thing that will really impress your date is to choose romantic messages and cute stuff. So be ready to search for:

Cat pictures (demo with a lot of them)
Hearts
Landscapes
Your own pictures

I’ve found a couple of good quotes on QuotationsPage & RomanticloveMessages and have written my own ones (this is really important).

Then, let’s put them inside our HTML with proper markup. We’ll have captions positioned on top, middle and bottom, this way:



You may not care for me like I care for you But if you ever need me, I will always be around for you.



It's hard to tell your mind to stop loving someone when your heart still does. 



Meeting you was fate, but falling in love with you was beyond my control.

And CSS will be:

.item .caption {
	position: absolute;
	top: 0;
	padding: 10px 20px;
	font-family: 'CartonSlab';
	font-size: 15px;
	color: #ffffff;
	background-color: transparent;
	background-color: rgba(0,0,0,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000)";
}
.item .bottom {
	top: auto;
	bottom: 0;
}
.item .middle {
	top: 50%;
}

Coding Slideshow JS

Our basic logic will be:

It’ll hide all captions and reduce opacity for images on start;
It’ll automatically expand box and show caption, one at a time;
When hovering images, it’ll increase its opacity and automatically stop our timer;
When the person clicks on an image, it’ll expand its box;

First, we’ll make sure that no function will run before all images are loaded (it wouldn’t look good, trust me). This code will do the trick (since we’ve uploaded jquery.images.loaded.js):

//defaults
var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";

$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});

This init() will do our first, third and fourth bullet points. Let’s go through it:

function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}

The coolest thing here is all those chained functions. They improve performance a lot and if you break lines between them (always before “.”) it’ll be much better to understand.

Now we have two important functions, startTimer() and stopTimer(). I’m pretty sure you know what do they do. We’ll use setInterval and clearInterval to control our timer:

function startTimer() {
	timer = window.setInterval( "next()", 6000); // it'll call next function every 6 seconds and will identify this interval as "timer"
}
function stopTimer() {
	clearInterval(timer); //we'll kill timer :(
}

Now we called “next” function every 6 seconds let’s see what it does:

function next() {
	//if we add one item to current we'll still below our total count of numbers?
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}

Now what you’ve been waiting for: expand()

//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}
/*** functions used above **/
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}

Ok, then, let’s group all this stuff inside one script call, and we’re done!

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});
//runs qwiki function for fisrt item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}
function startTimer() {
	timer = window.setInterval( "next()", 6000);
}
function stopTimer() {
	clearInterval(timer);
}
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}
//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}

Personal touch: My horrible voice as background music

I’ve been learning guitar for 1 month. I know how to play two songs (“In spite of all the danger” and “Stand by me”) and I sing really, really bad. But when I showed my girlfriend my first “demo” record, well, I understood why so many guys want to learn guitar.

This is my final personal touch, and you could do so with a cool picture, a recorded mesage (video, maybe), or whatever you can imagine.

What do you think?

So, have you liked it? Are you planning to do something really special to the ones you love most? Let me hear your thoughts!

Create Elegant Tags With Sliding Post Count For WordPress

Rochester Oliveira — Mon, 12 Dec 2011 10:00:35 +0000

Tired of the boring category style being always same, like a mini menu? Tired of items arranged horizontally or vertically, styled always the same way? Yes, I’m tired of it too. So let’s make things more interesting now.

Our starting point will be a cool sliding tags design made by Thomas Bosée. Then we’ll learn how to use WordPress wp_list_categories function, how to edit its result, how to code CSS and finally a little of jQuery “Black Magic”.

So, let’s rock!

Demo first, please

So our goal is to achieve the effect seen on this demo. As usual you can download our sample files and edit as you want!

Wp_list_categories()

Wp_list_categories is a function that gets all categories and has a few useful parameters. We’ll be using a few of them:

echo – whether the results should or shouldn’t be displayed. This is quite useful because we’ll have to adjust results a little bit
show_count – this one toggles the display of current post count in each category
title_li – since the default value is a big
Categories
we’ll change it
depth – It’ll be better not to have children categories this time. But if you want it just put it as zero and change ‘hierarchical’ to false

Our php will be like this:


 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	echo $variable;
?>

And this PHP outputs this HTML:


	design (17)
	icon (9)
	grid (3)
	clean (25)
	typography (8)
	minimal (12)
	illustration (1)
	high resolution (6)
	iphone (15)
	interface (21)
	grunge (10)

Oops, HTML is not quite right yet

As you may notice, the default post count is simple text with parenthesis. Well, in our original design we have count as a separate element, so we’ll need to change this default behavior. A simple way of doing this is with str_replace, we’ll search for “(“, replace with “” and then search for “)” e replace with “”.

This is how your category listing function will be:


 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "", $variable );
	$variable = str_replace ( ")" , "", $variable );
	echo $variable;
?>

And now we’ll have right HTML, as follows:


	design 17
	icon 9
	grid 3
	clean 25
	typography 8
	minimal 12
	illustration 1
	high resolution 6
	iphone 15
	interface 21
	grunge 10

CSS, CSS, CSS

(A.K.A. CSS3. Yeah, a really bad joke)

Now we’ll do this with a few cool CSS3 implementations. This is what will help us:

Before and after pseudo elements – instead of putting a lot of additional spans we’ll just use them to create pretty effects
Border-radius - we’ll need slightly rounded corners
Content - this CSS property will be especially useful because we’ll insert an image as content of before count and after count
Element positioning - we’ll have to be aware of positioning since before and after have to always be with our main span element

Let’s go step by step. Basic CSS for background and main div positioning. Nothing really major in here:

body {
	background: url(bg.png);
}
	#container {
		position: relative;
		width: 500px;
		margin: 50px auto 0;
		padding: 10px 0 20px;
	}

With #category and li rules we’ll achieve that side-by-side listing.

#category {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
	#category li {
		float: left;
		position: relative;
		padding: 0 10px;
		margin: 0 15px 10px 0;
	}

Our link styling will create that “white” part of our little tag. Background is a 1px wide soft gradient:

#category li a {
	float: left;
	padding: 4px 10px 0;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-decoration: none;
	border-top: 1px solid #d3d0cf;
	border-left: 1px solid #cac7c7;
	border-bottom: 1px solid #aeadad;
	background: url(bgTag.png) repeat-x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

Now we need to create the orange part of our tag. Since we’ll animate just the “middle”, we’ll have to do it in a way that our before and after elements will be “inside” of span but will go to right / left as our main element expands. So this will do the trick:

#category li span {
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0 0;
	margin-top: 1px;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-align: center;
	background: url(bgCount.png);
	overflow: hidden;
}
	#category li span:before, #category li span:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 30px;
		content: url(bgBeforeCount.png);
		overflow: hidden;
	}
	#category li span:after {
		left: auto;
		right: 0;
		content: url(bgAfterCount.png);
	}

jQuery Black Magic

First of all, we need to include jQuery, right? So we’ll do it with a really cool technique that I’ve seen at jQuery boilerplate:

We’ll try to get it from Google. Since almost everybody visits Google often we have a good chance of getting this right from the users cache. But if for any crazy reason Google is down (for instance, if we have been hit by a giant meteor just like our dino friends) it’ll get jQuery from our local file :)

Now we need to show / hide post counts when hovering over them, so our basic logic will be:

FIND all "#category span" tags
	animate their width to 0px
FIND all "#category li" tags
	WHEN mouseenter
		animate this.children("span") width to 35px
	WHEN mouseleave
		animate this.children("span") width to 0px

When translating this to jQuery what you need to be aware of is:

When you animate item to zero jQuery will add ‘display: none’ to it (will hide our before and after tags), so we’ll animate it to 5px instead
You have to chain selectors to get better performance, so we’ll find #category, then get each span, then go up a level (to li’s)
When you animate several elements it’s good to “stop” them before animating so we won’t have a lot of “dancing” tags if user moves randomly mouse over elements

Our final jQuery code will be this crazy thing:

$(function(){
	$("#category")
		.find("span")
		.each(function(){
			$(this).animate({"width": "5px"});
		})
		.parent()
		.hover(
			function(){
				$(this).find("span").stop().animate({"width": "35px"});
			}, function() {
				$(this).find("span").stop().animate({"width": "5px"});
			}
		);
});

So, what do you think?

Hope you enjoyed reading. Don’t be shy and share your thoughts with us!

Using Retro Style Images And Banners For Advertising

prit — Tue, 06 Dec 2011 10:00:17 +0000

Retro style images and pop art graphics like those of Roy Lichtenstein and Andy Warhol is a popular style adopted by graphic designers for web and print design. They are chic, fashionable, eye-catching and add to the ‘cool’ factor of the company and its products. Lots of stock images are available for download which can be used for web designing, however if you want something unique or customized it’s better to grab a pencil and paper and do it yourself.

Step 1: Visualize the layout

If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below

Step 2: Sketch

Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Step 3: Scan

Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

Step 4: Digitally enhance

Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

b. Zoom and use the pen tool to copy the finer details on layer 2

c. Use the brush to reconstruct the details on layer 2.

Step 5: Integrate

Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.

Definitive Mobile Guide – 40+ Tools, Frameworks And Tutorials

Rochester Oliveira — Tue, 29 Nov 2011 21:00:11 +0000

The mobile market is getting bigger and bigger. A lot of people are spending much more time mobile browsing than desktop. Sometimes I feel like developers aren’t paying proper attention to mobile interfaces. Maybe because we don’t have enough tools to do it, right? No, actually it isn’t.

Despite cool things like Safari Mobile that makes any (non-flash) website “browsable” it’s easy to see that conversion rates are much higher on interfaces design for mobile viewing.

So be ready to see A LOT of tools to help you create cool things for mobile with just what we know (HTML, CSS, JS).

Frameworks, plugins and development tools

Many of us know how to do things with HTML and JS. Sometimes seriously cool stuff using HTML5 effects and some of the newer coding options. Now you’ll see a lot of tools to help you to bring all your knowledge to create mobile interfaces easily.

App Inventor (beta)

If you like drag & drop, this one is for you. Actually you don’t need to know a single line of code to build your android apps with this great software. I’ve tried it myself and it works great despite a final app sizes being a little large.

DHTMLX Touch

One of the most well-known frameworks. Helps a lot when you know a little JS and HTML5 and want to create powerful apps.

EmbedJS

EmbedJS is a JavaScript framework for embedded devices (mobile phones, TVs, etc.). It takes a different approach than other frameworks by shipping just the code needed for each device. That means, there’s less code going over the wire, less code branching at runtime and less memory usage.

Gury

Gury (pronounced “jury”) is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.

iOSFrameworks.com

For those who knows basic Objective-C, this one is a really useful collection of frameworks to help you in your projects. Really useful!

iWebkit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iUI

Web UI Framework for mobile devices – iOS, Android, Palm, and others.

JoApp

Framework for mobile development with a lot of cool features, like native-like widgets, multiple ways to code, and heavy use of CSS3.

jQuery Mobile

How could I forget this one? Well, this is our well known jQuery with a lot of mobile-optimized features. With its recent 1.0 launch it will be a default script for many sites (just like jQuery “normal” is now).

jQTouch

At first it may look like just another plugin for responsive layouts. Well, it’s actually almost a UI framework with a lot of cool features that will save you a lot of development hours. :)

Kendo UI

Kendo has a lot of cool features for responsive UI. It does a lot of amazing things, like responsive charts being one of the most impressive performances you’ll find.

Lime.JS

Do you like games? Yeah, you, me and Lime.js do. Build games faster than ever with this HTML5 game framework.

MOBL

Feel like learning a new language? Mobl is a new programming language for mobile devices. Sounds cool, huh?

NEXT Interfaces

NEXT is a free, open source Java and HTML5 framework for building Native Looking web applications for smartphones and tablets.

NimbleKit

NimbleKit is the fastest way to create applications for iOS. You don’t need to know Objective-C or the iOS SDK. All you need is to know how to write an HTML page with JavaScript code.

PhoneGap

Using the free open source framework or PhoneGap build you can get access to native APIs.

Sencha Touch

You’ve probably heard about this one, Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

The M-Project

It’s a really good framework, with great documentation, built to allow you to develop easily cross-platform mobile apps.

Titanium

Titanium is different because after your development process it generates a compiled app for iOS or android, so you can get a higher performance with native apps without learning a line of Objective-C or Java.

Touchy

More than just a boilerplate, it has a lot of built-in functions to do all the heavy lifting, so you can focus on getting your app out there. Touchy goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.

WebApp.Net

WebApp.Net is a light weight, powerful JavaScript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Wink Toolkit

Wink Toolkit is a lightweight JavaScript toolkit, designed and developed to meet the specific constraints of the mobile environment. The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities.

Zepto.Js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Miscellaneous tools

Here we have everything from validators to image gallery plugins.

320 and up

The ‘tiny screen first’ boilerplate extension. It prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

960 Grid on jQuery-Mobile

jQuery-mobile-960 is a port of 960 grid to jQuery mobile. It merges the flexibility of 960.gs, and the ease of jQuery mobile.

Animatable

It’s not ready to use…yet. But you should bookmark this one. It’ll help us create animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.

Dynamic carousel

Responsive carousel script. Check it out!

Galleria.Aino.Se

Galleria is a cool image gallery script that works nice from desktop to mobile.

HTML5 Boilerplate / mobile

HTML 5 Boilerplate has a set of cool features for mobile interfaces with a lot of guidelines to get the most from your mobile app.

Initializr 2

Since it uses the HTML5 Boilerplate it has the same cool features.

Masonry

It allows you to use crazy grids that would be just impossible with CSS floats. Plus, with a touch of creativity, you can do cool things, like this Scroll Wall with jQuery Mobile and Masonry.

Mobile Emulators & Simulators: The Ultimate Guide – MobileXWeb

A complete guide of mobile emulators and tools to help you test your apps.

Not Just A Grid

Not Just a Grid is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

MobiReady

The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards.

Treesaver

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.

W3C Mobile Validator

It’s from W3C. No more description needed, right?

Wijmo

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts.

WP Touch

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress blog into an iPhone application.

Tutorials and Articles

Mobile Web Design Trends and Best Practices – DesignModo

A long and very well written guide with all the basics you need to know before getting started with this mobile development thing.

Building Mobile Web Apps the Right Way: Tips and Techniques – SixRevisions

Good guide with a comparison of what you’re used to doing for desktop development and what you should be doing for mobile interfaces.

10 handy jQuery mobile tips and snippets to get you started – WebDesignerDepot

jQuery mobile is a great tool, indeed. But you need to know how to use it. This really helpful guide will help you get started with jQuery mobile!

Build a Responsive, Mobile-Friendly Web Page With Skeleton – DesignShack

I didn’t mention skeleton because this guide will help you understand it better. You can use these principles in all other mobile boilerplates out there.

Awesome Mobile Image Gallery Web App – Codrops

Check it with your mobile device and be as amazed as I was at first. Pretty cool :)

Snickles: Create A Modern Business Template In Adobe Photoshop

Michael John Burns — Wed, 23 Nov 2011 21:00:53 +0000

Good day! Today we will be designing a modern business template in Adobe Photoshop.. This template will contain a header, slide show, service area, video, about us, testimonials, and footer. What you will be learning from this tutorial are how to achieve that 3D looking interface in just a few simple steps, creating patterns, combining textures, colors, alignments and many more. So get ready and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Paper Textures
UI Elements
Social Icons
Icons.
Featured Illustration credits to Atixvector

Step 1: Setting up the Document

Start by creating a 1400px x 1700px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

Rulers: Ctrl + R
Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our 1st guide by going to View – New Guide, set the value to 220px. Repeat the step of create a guide but now change the value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Base Background for Header and Slider

What we’re trying to achieve here is a 3D like surface to hold our slider preview and on top of it will be our logo, navigation and RSS feed.

To start using Rectangle Tool(U) create a 100% by 960px shape, color #092f56. Next, using Ruler Tool(I) measure 140px staring from the bottom of the shape towards top and drag a guide from the ruler.

Next add a 1px line, color #062340 just 1px above the guide.

Using Rectangular Marquee Tool(M) create a selection as shown in the screen shot below. Set the Foreground color to #000 and select Linear Gradient Foreground to Transparent then, fill the selection with it. Once you have fill it set the Blend Mode to Multiply, Opacity to 30%.

Select Rectangle Tool(U) and create a 100% by 45px shape. Place it as shown in the screenshot below.

Apply this Blending Option

Dorp Shadow: #000

Inner Shadow: #0f3b69

Gradient Overlay: #051f3a, #082c50

Stroke: #06213a

Result

Next you need to extract the paper texture that you have downloaded. Select Paper 9 and place it into our canvas as shown in the screenshot below.

Set the Blend Mode to Multiply and Opacity to 30%. Later on when we finished putting all the content for header and slider we will be adding highlights to our base background.

Step 3: Working on Header

Our header will contain Logo, Navigation and RSS Feed.

Logo

I used a font called Snickles you can get it on Font Squirrel. Now type in your website name using the font settings below.

Font Settings

Font Name: Snickles
Weight: Normal
Size: 60pt

Apply this Blending Option

Drop Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #c0c0c0, #ffffff

Result

Navigation

Using Rounded Rectangle Tool(U) set the Radius to 20px. Create a 580px by 50px shape as shown in the screenshot below.

Apply this Blending Option

Dorp Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #fea201, #fccf6a

Result

Using Text Tool(T) add site links Home, Blog, About Us, Free Consultation and Contact Us. Distance with each links will be 41px so go ahead and measure it with Ruler Tool(I)

Font Settings

Font Name: Helvetica Neue
Weight: Roman
Size: 12pt
Color: #fff, #ac5b00

Duplicate the text and exclude the Home link in a separate text layer. Place it under the original text layer and move it 1px above using arrow up key and lastly change the color to #d38904. For the other links place it below the original text layer and move it 1px below and change the color to #ffe91e. You may now have an embossed looking links.

We will be adding dividers. Using Line Tool(U) with a fill color #fee79e create a 1px line and place it as shown in the screenshot below.

Below all the text layers create a 70px by 30px shape, color #ee9e0d using Rounded Rectangle Tool(U) and place it as shown in the screenshot below.

Apply this Blending Option

Dorp Shadow: #fff

Inner Shadow: #000

Result

RSS Feed

Download RSS button from the resource and place it as shown in the screenshot below and add a text using Text Tool(T)

Font Settings

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #fff

Apply this Blending Option

Dorp Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #f38600, #fed676

Result

Step 4: Working on Slider

Our slider will contain text title & description, button and a browser display.

Text Title & Description

Using Text Tool(T) place a dummy text using the text format provided below.

Title

Font Name: Helvetica Neue
Weight: Condensed
Size: 24pt
Color: #fff

Description

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #dddddd

Button

Using Rounded Rectangle Tool(U) create a 150px by 35px shape.

Apply this Blending Option

Dorp Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #f38600, #fed676

Result

Label it with View Details using Text Tool(T)

Description

Font Name: Helvetica Neue
Weight: Roman
Size: 14pt
Color: #fff, #02b0f3

Result

Display

First using Rectangle Tool create a 450px by 250px shape.

Select Rounded Rectangle Tool(U), set the Radius to 5px. Create a 450px by 20px and fill the rounded corners in the bottom.

Apply this Blending Option

Drop Shadow: #404040

Inner Shadow: #fff

Gradient Overlay: #f38600, #fed676

Result

Open up the web ui elements. Cut out the buttons and resize it to fit to the shape that we have created. Refer to the screenshot below.

Next create a new layer below the white shape we have created. Select Elliptical Marquee Tool(M) and create a selection as shown in the screenshot then fill it with #000. Go to Filter – Blur – Gaussian Blur – 2 and change the layer Opacity to 50%

Controls

Using Ellipse Tool(U) create a 14px by 14px shape. Place it on the center as shown in the screenshot below.

1st Shape

Drop Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #03b8ff, #89e3fe

2nd & 3rd Shape

Dorp Shadow: #fff

Inner Shadow: #000

Color Overlay: #051f3a

Result

Highlights

Select Dodge Tool(O) set Exposure to 10%, also set the Dodge size to 200px.

Duplicate the base layer shape and rasterize it. Using Dodge Tool(O) lighten up the area as shown in the screenshot below.

Result

Step 5: Working on Consult Area

To create a pattern create a new 15px by 15px transparent document. Using Pencil Tool(B) create a pattern the same on the screenshot below.

Go to Edit – Define Pattern, name it zigzag. Now, create a 100% by 150px shape using Rectangle Tool(U). Select Paint Bucket Tool(G) and change Foreground to Pattern from the dropdown list. Create a selection at the very bottom of the shape and fill it with pattern that we made.

Apply this Blending Option

Drop Shadow: #bfbfbf

Gradient Overlay: #f5f4f4, #fdfdfd

Result

Using Text Tool(T) add a dummy text.

Font Settings

Font Name: Helvetica Neue
Weight: Light Condensed
Size: 20pt
Color: #444444

Button

Create a 210px by 50px shape using Rounded Rectangle Tool(U), apply the same Gradient Overlay and Inner Shadow.

Apply this Blending Option

Stroke: #cf8606

Label it with CONSULT NOW using Text Tool(T).

Font Settings

Font Name: Helvetica Neue
Weight: Roman
Size: 18pt
Color: #fff, #cf8606

Result

Step 6: Working on Services

Service area is divided into 4 columns. Each column has a size of 210px by 125px. The distance of each column will be 40px. Create this guide by measuring using Ruler Tool(I).

Open up the icons set that you have downloaded from the resource and place it as shown in the screen shot below. Next label each Icon using Text Tool(T).

Font Settings

Font Name: Helvetica Neue
Weight: Condensed
Size: 18pt
Color: #444444

Using Line Tool(U) color #bfbfbf, #f8f8f create lines as shown in the screenshot below.

Once you are done, merge all the line shape and mask it by clicking the mask icon from the layers panel. Using Brush Tool paint every edges of the line. You should have similar to the screenshot below.

Step 7: Working on Video Tour

Using Text Tool(T) add a header text.

Font Settings

Font Name: Helvetica Neue
Weight: Condensed
Size: 22pt
Color: #444444

Using Rectangle Tool(U) create a 460px by 255px shape, color #dddddd.

Apply this Blending Option

Outer Glow: #bfbfbf

Stroke: #fff

Place some sample play button at the center of the shape.

Result

Step 8: Working on About Us and Testimonials

Header font is the same, for the paragraph use the font settings below.

Font Settings

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #444444

For the thumbnail in the testimonials area create a shape 70px by 70px and apply the same blending option as we did in our video tour. Change the stroke size to 3px. For the quotation follow the font settings below.

Font Settings

Font Name: Arial
Weight: Regular
Size: 215pt
Color: #dad9d9

Result

Step 9: Working on Footer

Our footer will contain Quick Links, Latest Posts, Latest Tweets, We Socialize, and Copyright. The width of this will be the same to our 4 columns as we did in the services area.

To start let’s create the base background first. At the very bottom of the canvas create a 100% by 45px shape, color #04203b using Rectangle Tool(U). On top of it create another shape size 100% by 450px shape, color #052342. Duplicate the paper texture we made on our header and slideshow area then place it below to our footer.

Quick Links

The header title will be place 30px below the shape. Each link will have a distance of 15px from the dividers. Divider color will be #265686

Header

Font Name: Helvetica Neue
Weight: Condensed
Size: 18pt
Color: #fff

Links

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #fff

Latest Posts

For the latest post still the same text format as we did in Quick links.

Date

Font Name: Arial
Weight: Regular
Size: 11pt
Color: #8496a9

Latest Tweets

Text

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #8496a9

Link

Font Name: Arial
Weight: Regular
Size: 12pt
Color: #fcc757

We Socialize

Place the Icons you have downloaded from the resource accordingly as shown in the screenshot above.

Apply this Blending Option

Drop Shadow: #000

Inner Shadow: #fff

Gradient Overlay: #03b8ff, #89e3fe

Copyright

Here is our Final Result!

PSD Download

I hope you enjoyed and learned something from this tutorial. Don’t forget to comment, share and subscribe. Thank you! :)

1stwebdesigner - Graphic and Web Design Blog » tutorial

jQuery Mobile – What You Need to Know

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Then, the hero arrives

Awesomeness proven, let’s code!

Basic structure

Header

Footer

Basic UI components

Header

Footer

Header second page

Footer second page

Navigation, Lists, Form & Dialog Components

Alert element

Form elements

This is a list

Alert!

Custom font embedding

Compress images

Remove components

Now it’s your turn?

Create a Classic-Styled Portfolio Design in Adobe Photoshop

Resources for this tutorial

Step 1: Setting up the Document

Step 2: Working on Base Background for Header and Slider

Step 3: Filling The Header With Logo/Nav & Slider

Step 4: Filling In The Content

Step 4: Let’s Make A Footer

Create A Sleek Music Player In Adobe Photoshop

What you’ll need:

PSD Download

Prepare your tools

Start designing the player!

What you should have this far

Lets make the album cover

What you should have this far:

Making the controls

What you should have this far:

Give the song a name

What you should have this far:

Making the love and repeat button

What you should have this far:

Make the track length bar

Total track

Played track

What you should have this far:

Design the tracklist

What you should have this far:

Final result

Create a Web Hosting Landing Page in Adobe Photoshop

Resources for this tutorial

Step 1: Setting up the Document

Step 2: Working on Background

Header and Slider

Newsletter

Content & Copyright

Footer

Step 3: Working on Logo and Navigation

Logo

Navigation

Step 4: Working on Slider

Step 5: Working on News Letter Sign Up

Step 6: Working on Main Content

Pricing Table

About Us

Step 7: Working on Sidebar

Services

Testimonials

Step 8: Working on Footer

Quick Links

From The Blog

Quick Contact

Follow Us

Finally We’re Done!

4 Simple Steps To Make Silhouettes Using Photoshop

Step 1: Inspiration

Silhouettes in movies

Silhouettes as traffic symbols