Web design: CSS image sprite with compass

CSS image sprite is a method of combining multiple images in an image file reduce HTTP requests and Web load performance improve. There are many ways and practical tools to do this, otherwise you can do it also traditionally with Photoshop.

However, through my whole experience of dealing with CSS image sprite, there is no other way, that much easier than with sprite function for compass. So, we take a look on the operation.

Reading tip: syntactically awesome stylesheets: compass in Sass

Before you work with compass codes, we need to create compass project. So, every time there is a change in the project, including the images and the .scss compass in the right shape is compile.

We open the terminal or command prompt (if you're on Windows), and run the following commands.

Compass create / path/to/projectcd / path/to/projectcompass watch

As mentioned above, you can join Photoshop manually the images, or you can also some handy tools like SpriteBox or SpriteMe. Compass integrated this feature into the function. Let us say we have the following Images/browser/PNG icons folder.

Icons by Futurosoft

To participate the symbols in the compass, we can use @import rule and start it on the photo sessions, followed by the enlargement of the image via the stylesheet .scss like so

@import "browser / * .png ';

After you save the file, compass will combine to generate these images and new image files as follows.

In addition, we can set the sprite alignment. As you can see in the screenshot above, the images are arranged vertically by default. In the event that a vertical orientation the circumstances does not fit, we can directly horizontally or diagonally with the following variables $

Horizontal

$browsers-layout:horizontal;@import "browser / * .png ';

Diagonal

$browsers-layout:vertical;@import "browser / * .png ';

If we combine the image have ready, we add the image in the style sheet with the background image. Traditionally, we will do it in this way.

.Chrome {background-position: 0 0;} Width: 128px; {Height: 128px;} .Firefox {background-position: 0 - 133px;} Width: 128px; {Height: 128px;} .IE {background-position: 0 - 266px;} Width: 128px; {Height: 128px;} .opera {background-position: 0 - 399px;} Width: 128px; {Height: 128px;} .Safari {background-position: 0 - 532px;} Width: 128px; {Height: 128px;}

At Compass, we have a few options that are much easier. First we can generate @include something like the CSS rules using the following syntax all

@include browser sprites;

This line at the top than regular CSS compiled background image definition and each generates the position as shown below.

is sprite, is chrome-plated is-ie, is Opera, is Firefox, Safari {background: url('/images/browsers-sad8e949931.png') no-repeat;}.Browser chrome {background-position: 0 0;}.Browser-Firefox {background-position: 0 - 128px;}.Browser-ie {background-position: 0 - 256px;}.Opera browser {background-position: 0 - 384px;}.Browser-Safari {background-position: 0 - 512px;}

We can also add background image individually to specific selectors use this syntax @include

Li {@include browsers-sprite(safari)};

Compass is smart enough to the background-position, without it explicitly specify to identify. In regular CSS transformed this line at the top of

is sprite, li {background: url('/images/browsers-sad8e949931.png') no-repeat;}Li {background-position: 0 - 512px;}

The last thing, that we need to do is to specify the container height and width, which contain the image. We often do it in the traditional way through manually to check the image width and height (probably due to image information or image properties).

With compass, we can this function

$height: Browser-sprite height (Safari); $width: Browser-sprite-width (Safari); Li {display: inline-block;} Height: $height; Width: $width;@include browsers-sprite(safari);}

When we compile the above code, the following in regular CSS is it.

is sprite, li {background: url('/images/browsers-sad8e949931.png') no-repeat;}Li {display: inline-block;} Height: 128px; Width: 128px; {Background-position: 0 - 512px;}

There are actually a few other useful features of Compass together with use, but these are all essential functions to create CSS image sprite with compass. Still, if you're familiar with this topic, we recommend to follow our earlier post series about Sass and compass. We hope you find this post useful.

Graphic & Web Designer; approximately 2 years, works as a freelance designer been specializing in e-commerce for individual action. He shares his enthusiasts are contacted in Web design at the creatiface.com and on Twitter @creatiface

View the original article here

Create a beautiful mixed media illustration

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request

For many artists, an illustration begins with a pencil, a piece of paper, and a great idea. In this tutorial, Andreas Preis will show you how to create a beautiful mixed media illustration by sketching out an idea on paper, inking it, and then by bringing it in to Photoshop to clean it up, add color, and finally, to add some special effects. While this tutorial is written, it also includes a time-lapse video demonstrating the entire process of drawing and inking the illustration on paper. Let’s get started!

Before you get started, watch the video to see how the drawing was created.

It all starts with a blank white page. Feel free to use a reference photo if you need one. Otherwise, draw whatever you like.

First of all, create a rough sketch using a pencil. At this point it’s only about proportions and a layout.

Using some fineliners, you now have to trace every outline you think will work in the end. After that, erase every remaining pencil line.

This is the final step. Start to ink in your drawing. If you work very detailed, this might take you a while.

After some hours, this is how it could look.

Scan your drawing using only grayscales. The resolution always depends on the final size you need, something between 600 – 800 dpi. Would be advisable but don’t forget, the bigger your file, the slower your computer might work! After scanning it, you can finally open it in Photoshop.

Enhance the contrast using a Curves Adjustment (Command/Ctrl + M). Make it as close to black and white as possible.

This is how it should look.

Now you have to clean up some mistakes. That means you need to remove some misplaced lines and dirt. It helps here to invert your drawing by pressing Command/Ctrl + I, since it’s easier to see mistakes that way.

Use the Burn/Dodge Tool (O) as well as the simple Brush Tool (B) to remove every stain you find. After that, invert the drawing again to check if everything looks right.

Now it’s time to cut it out. Press Command/Ctrl + A to select everything and copy your piece pressing Command/Ctrl + C, than create a layer mask. Now click on your mask in the layer panel while holding ALT. This way you get into your mask, where you can paste your drawing by pressing Command/Ctrl + V.

Invert your mask (Command/Ctrl + I). This way only your drawing will be visible later on.

Leave your mask by clicking on your layer in the layer palette. Fill the whole canvas black.

Apply your mask using this shortcut: Press Command/Ctrl + G then Command/Ctrl + E (which basically means, you create a group with your layer and reduce it to one layer). Your drawing should be cut out perfectly.

Finally you can correct some mistakes within the proportions of your drawing. Using the Liquify Tool (Filter > Liquify), you can change some curves and lines.

First of all, add a white background layer.

The background will help you to get a better feeling for the colors

Create a selection of everything surrounding your drawing by using the Wand Tool (W). Invert your selection by pressing (Command/Ctrl + Shift + I). Now choose Selection > Modify > Contract. 5 Pixel should be enough. Add a layer below your drawing and fill your selection with some dark color. This will be your main color for the hair.

Add another layer for the face. You can use the Brush Tool (B) here. Fill it white.

Basically you now have to create layers for every main color.

Finally you can add details like in this example the "pearls" in her hair.

Before moving on, you should lock the Opacity for every colored layer. This will help you later on, because you don’t have to be too careful when you’re shading.

Now you can add some different tones to her hair. Still using only plain colors, you should just separate the individual parts a bit. You can use the Brush Tool again.

For shadows and lights, you can use different Photoshop brushes. Online collections might also work, but you can easily create them on your own. Here you see a simple scan of some wiped color stain (available in download files).

You have to enhance the contrast again. After that, choose Edit > Define Brush Preset.

You can of course give it a name if it helps you to stay organized.

Now go to your Brush Palette and select your new shape.

Go to Shape Dynamics and play a bit around with Size Jitter and Angle Jitter

Using this brush, you can start give each layer some lights and shadows. Start with the hair.

You can also use some discrete additional colors. Like in this example, putting some blue into the scarf.

Some different techniques can keep things interesting. As for the pearls, there are just plain colors, but different tones of yellow and brown.

The face is the trickiest part. You need some experience to recognize where to add shadows and where to add lights. This would be again a place where reference photos might help you quite a bit.

To finish the portrait, you can add a Makeup layer, using the Multiply mode.

You can create the background using any type of paint or media you like. Feel free to use acrylics, aerosols, brushes, etc. Be open to experimentation.

Just play around! Spray, paint, scratch, whatever you like!

For this specific piece, we need two completely colored pieces and some drips, stains etc.

Here’s a photo of the two pieces used for our example.

Scan everything you just created. Just make sure that everything has already dried. It’s advisable to use quite a big resolution ( > 900 dpi) as this will give you more possibilities to use them afterwards.

Add your background to your working file. You can remove the white background and create a group containing the whole portrait. To change the color, add an Adjustment Layer using Hue/Saturation.

You can use whatever color you like as a background. For this piece, you can use Colorize, choosing a dark turquoise.

Now add your second colored piece and adjust the angle pressing Command/Ctrl + T.

Turn the second scan in a way that fits to the first one!

Add a layer below the second piece, fill it black and create a new layer out of both of them.

Now create a new layer mask and then select all by pressing Command/Ctrl + A. Click on your mask in the layer palette holding ALT. Press Command/Ctrl + V to paste everything. Your colored structure should now work as a mask.

Leave your mask by clicking on your layer in the Layer Palette. Now click on your mask again, but this time without holding ALT. This way you can see what happens on your canvas, but you’re still able work in your mask. Now you have to try out again a bit, using the Curves Tool by pressing Command/Ctrl + M

Finally only the bright parts of your second colored layer should be visible.

Sometimes you realize, that your original shading doesn’t really work that well with your background. So adding some shading can help here. Creating a layer on top of the drawing, you can add shadows like on the shoulder in this example.

Now you can also add some more color drips. This will give your artwork a "street art" feel to it. Create different layers for each different colored cut-out drip.

To reduce the clean computer feel, change the Opacity of every layer containing the drips.

Merge all your drips to a group. Adding a mask and erasing some parts using different brushes will also help to give it a more analog look.

It’s always helpful to have some kind of library for structures like paper, walls etc. Try to collect every interesting thing you find, scan or photograph and sort it somehow. Here you can use a paper texture.

Next thing is to reduce the saturation and make it a bit brighter, using again an Adjustment Layer.

Turn the blend mode of your texture layer to Multiply. Than add a mask and remove a bit of the structure in some places by using grey within your mask. This can help to accentuate some brighter spots (In this example especially the face).

Now can use the same trick you used for the drips. Add a mask to your "Woman" group. Now remove some little things with some brushes. By giving it a more destroyed look, it again adds some analog feel.

A final little detail added to your drawing: Go to your texture layer, select all (Command/Ctrl + A) and copy it (Command/Ctrl + C). Now go to your drawing and add a layer mask. Click on it again holding ALT. Paste the structure (Command/Ctrl + V).

Now you have to lighten up the mask. Using the Curves Tool (Command/Ctrl + M), you can reduce the contrast.

We don’t want to really remove parts of our drawing, just give it some structure, so like this it should work.

Here’s some detail how it should look like.

Create a new layer on top of your stack and fill it with a color close to your background color.

Now add a mask and fill it black. Using the Brush Tool with very soft edges, you accentuate only the frame and the corners.

Leave your mask. This is how it should look.

Now turn the layer’s blending mode to Multiply.

While you could also leave it at that, it can always be interesting to mix more than one vignette to keep it a bit more dynamic. So we add another layer on top, this time filling it white. Now change the layer style (double click on your layer) to this:

This is how your layer should look like. Set the blending mode to Multiply.

I hope that you enjoyed seeing how I create my portrait illustrations. Over the years, I created a lot of my work through practice and experimentation. As a result, I developed my own artistic style. I hope that you can learn from my techniques to create your own unique style and illustrations. Remember to practice and, above all, have fun!

View the original article here