Thursday, August 26, 2010

Three Kick-Ass Web Developer Tutorials

Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that's what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.

A jQuery, CSS3 & HTML5 Hover-Based Interface

A jQuery, CSS3 & HTML5 Hover-Based Interface

In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you'll be creating could easily be used for a portfolio or business site and the concepts you'll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How to easily create charts using jQuery and HTML5

How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5

By Paul Andrew (Speckyboyand speckyboy@twitter).








Monday, August 23, 2010

Simple Roy Lichtenstein Style in Illustrator and Photoshop

I have been playing with the Halftone filter in Photoshop for the past few weeks and trying different things we can do with it. I also discover the Width Tool in Illustrator CS 5 and it was a great surprise because now we have much more freedom when playing with strokes. So with these two things in mind I decided that I had to create an image using them, and then the idea of a design inspired in Roy Lichtenstein.

There are quite a few tutorials showing how to create this type of image, but I decided to try it myself. I haven't checked any tutorial because I wanted to play with the tools, so the technique might be the same as other tutorials but I really don't know. Besides I think a tutorial on Roy's style is always a great add to the tutorials section of Abduzeedo.

Roy Lichtenstein (October 27, 1923 – September 29, 1997) was a prominent American pop artist. His work was heavily influenced by both popular advertising and the comic book style. He himself described pop art as, "not 'American' painting but actually industrial painting". - Wikipedia

Step 1

Let's start the tutorial in Illustrator. Open Illustrator and import the photo you will apply the effect. The one I'm using is courtesy of Shutterstock and you can find it here.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 2

In Illustrator, select the Pencil Tool (N) and start drawing over the photo using it as references. I started off with the eyes. I also use the Ellipse Tool (L) for the pupils.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 3

Keep drawing with the Pencil Tool (N) and with the Pencil Tool (P) when you need more precision, however it doesn't need to be super perfect.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 4

With the Pencil Tool (N) create the contour of her hair.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 5

Stll with the Pencil Tool (N) add some details for her hair.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 6

Here I have all the vector elements I drew to create the girl. You can add more if you want, it will depend on the photo you are using.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 9

Get rid of the photo and start playing with the vectors only. Here you can see all the elements without any color and the same stroke size.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 10

One of the best tools in the Illustrator CS5 is the Width Tool (Shift+W). You can change the width of parts of the stroke, it's fantastic.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 11

Still with the Width Tool (Shift+W) play with the strokes on her hair and hands. Use the image below for reference.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 12

Time to add some colors. I used beige for the skin, yellow for the hair, white for the eyes and black for the details. For her blouse I used green.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 13

Now let's go to Photoshop. Open Photoshop and import a paper texture to use for reference. The one I'm using is courtesy of Shutterstock and you can find it here.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 14

Import the girl photo too. We will use it for reference for the vectors from Illustrator. It will also be used to create the halftones. Also change the Blend Mode of the layer to Multiply.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 15

Mask the photo of the girl so it will be over the paper area only. The best way to do that so we can use the same mask for other layers is to create a group and mask the group in Photoshop.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 16

Add a new layer beneath the layer girl but still inside the folder with the mask. Change the Blend Mode of the new layer to Multiply and fill it with Cyan.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 17

Copy the vectors from Illustrator and paste them in Photoshop. I used Smart Objects for the option when paste it because that way I can change the vectors anytime I want and see the results in Photoshop. As you can see in the image below I changed the Opacity of the Layer to 70% so I can adjust the position more easily .

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 18

Once you find the right alignment change the opacity back to 100%.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 19

Reorder the layers so the photo of the girl is on top of the vector layer. After that go to Image>Adjustments>Desaturate. You will have a black and greyscale photo now. After that go to Image>Adjustments>Levels. Change the Black Inputs to 60 and the White Inputs to 195. After that change the Blend Mode to Multiply.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 20

Go to Filter>Pixelate>Color Halftone. Use 15 for the Max. Radius and 199 for the channel values. Tip: Depending on the size of your design the Max. Radius will have to be different.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 21

Here is the image after the halftone filter. It's almost done but there are a few details to work on so the image gets that old/vintage look. Also the halftones are over the teeth and the eyes so we have to fix that.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Step 22

Duplicate the paper layer and just move it on top of the others. After that Change the Blend Mode to Linear Burn.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Conclusion

Here is the final design. As you can see I clean the halftones over her eyes and mouth and also added a diagonal pattern in the background.

This design was just an experiment using halftones to create a Roy Lichtenstein inspired design. I'm working on some new designs where I go a little bit further with this technique, but as you could see, the halffones and the vectors with the paper textures do a pretty decent job in recreating Roy's incredible style.

Simple Roy Lichtenstein Style in Illustrator and Photoshop

Download the Photoshop File

Click here to download the Photoshop file used for this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:








Friday, August 20, 2010

The Advantages of Using CSS Sprites Along With a Few Tips

There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.

To better understand this concept, let us look at the following example image:

Example

As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.

Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.

Who Uses CSS Sprites?

Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.

Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.

Cut Back On HTTP Requests

One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.

Saves Time

By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.

Flexibility

By utilizing CSS sprites, you are giving yourself more flexibility over your website's design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.

Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.

Tips

Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS "spriting" experience.

Plenty of Space

While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.

Left to Right, Right to Left

No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.

To better understand this concept, let us have a look at the sprite below:

Example Sprite

Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:

Book Sprite

Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.

Repeating Images Should Consume Less Pixels

Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.

To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.

One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.

However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.