Double-J Design » Sketchy

New Icon Set: Super Sketchy

Double-J Design — Mon, 26 Sep 2011 10:46:14 +0000

As we have received a lot of positive feedbacks from our visitors about our sketchy style icon set Handy and Sketchy. We would like to expand them into a full set. Here we combined the style of Super Mono icon set and Sketchy icon set, we are pleased to release this Super Sketchy Vector icon set which includes 96 vector icons in 2 versions: Colour and Mono. All icons are in EPS format and can be scaled into whatever size you needed, very useful for your website design and print product design. A free raster icon pack in PNG format will be release soon, if you would like an update from us, subscribe to our RSS feeds or leave a comment here so that we can send you the latest update.

Below you can find a full preview of all icons. Standard licenses are available from £20.00.

But it Now

16 Free Sketch Icons

Double-J Design — Thu, 23 Jun 2011 09:35:09 +0000

Sketchy Icons was one of our popular designs, however those icons are drawn in normal vector method and then were converted into sketch style using some filter and effect in Illustrator. Here we are very glad to introduce a set of 16 free icons named “Handy” truly drawn by hand using a pen tablet. The icons have been published on Icondock It provides a rich pencil sketch feel and will be perfect for websites or designs using sketchy style. The set includes 16 free icons in two different color schemes (black/white and colored) and it is licensed under CC 3.0 Attribution license. You can use them for free in your personal or commercial project but an attribution to the author (Double-J Design) is required. It is not allowed to use them in any kind of integration in a product that is for sale.

Colour Version

Black & White Version

Download

Origami Colored Pencil Icons

Double-J Design — Mon, 01 Mar 2010 15:07:02 +0000

Origami is one of our very popular icon sets. We released the free set a few months ago, we released a full set as well. Here we are glad to present another free icon set based on this design, but this time, they have been transferred into an icon set with colored pencil sketch style, which is becoming more and more popular in web designs and developments. We produced the icons in four colors. In total, there are 160 icons coming in 32-bit transparent PNG format and in four different sizes (32 pixels up to 256 pixels). If you want to color them in a unique color that matches your design, just let us know your color code, we can do it for you.

The icon set is free for both commercial and personal use. However, resell is not allowed. If you are interested in integrating these icons into your commercial web templates or themes that are for sale, please contact us for an extended license.

Here are the full previews of the entire set and download link can be found in the bottom of this page. Feel free to share them with your friends and enjoy!

Download

A Set of 32 Free Sketchy Icons

Double-J Design — Thu, 03 Sep 2009 19:28:07 +0000

If you have got a sketchy or handy drawing style website, you might be looking for some icons in a sketchy style as well. After I presented the tutorial of “How to draw a sketchy style icon“. Here is a free set of 32 icons named “Sketchy” which is in a sketch drawing style. The set includes two drawing styles: Plain and Scribble (see Preview images below).

All icons in this set are completely free for both personal and commercial use. Resell and distribution is not allowed. The icons are available in 3 different sizes (48×48 pixels, 64×64 pixels and 128×128 pixels) and come as 32-bit transparent PNG files. A number of icons in the same style will come soon later.

If you like this set of icons and want to share them to your friends, please refer your friends to this page so that they can download their copy from here. Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy!

Download

How to draw sketch-style icons in Illustrator

Double-J Design — Fri, 20 Mar 2009 20:51:34 +0000

In this tutorial, we will see how to draw vector icons in a sketch style using Adobe Illustrator CS3. In many cases, sketch style graphic elements (backgrounds, icons, texts) are popular especially for designers’ websites as most of designs come from the very basic sketch drawings. Examples can be found everywhere (e.g. Web Designer Wall, Carphone Warehouse).

Many design would draw these icons by hand and then scan them into the computer, clean up a little bit and use them. Actually, to draw some vector icons in this style is not as complicated as it looks like. Thanks to some distortion functions in Adobe Illustrator. Here we will share some easy steps of drawing an RSS icon and a MP3 file icon. Once you master this technique you can create similar icons for use in other projects like printed brochure layouts.

Step 1

Create a new Illustrator file, basically what we want is a number of same lines in the same direction. Unfortunately, Adobe Illustrator does not have any array tools. However it does have a blend tool which can do the job. Draw a horizontal line, rotate 45 degree and make a copy. Put the two lines at the top left and the right bottom of the art board, respectively.

Click the Blend Tool on the toolbox, the cursor will become a small square with some dots. Move the cursor onto the first line, a small cross will appear on the cursor. Click once, and move to the other line click again when the cursor changes. Now Illustrator will create several lines between the two lines you drew.

You can adjust the stroke weight and the specify the steps between the two lines (double click the blend tool button on the toolbox, the option dialog will pop up) according to your drawing requirements. Basically, when drawing by hand, the more intensive the lines are, the darker colour they represent. So if your icon set are in a single colour scheme, this can be a good way to vary the darkness. Adjust the size so that the lines can cover the art board. Use the command Object>>Expand in the menu to convert the effect into objects which will produce a group of lines.

Step 2

Now, draw a square in the center which be used as the boundary of the RSS icon. Select both the group of lines and the square. Use the Crop command in the pathfinder window to crop the area in the center.

Before doing this, you should make sure the group of lines filled with any colour (NOT None or Transparent). Other wise the crop won’t work. After doing this you probably won’t see the lines but you still can see the selections because the stroke colour has changed. I am not sure why this happens but when you assign the stroke colour you should have the following graph.

Step 3

Apply the Illustrator filter “Tweak” (Menu: Effect>>Distort & Transform>>Tweak…). Set the amount for both horizontal and vertical into 1% relative. The lines will be tweaked a little which is similar to sketch drawing.

Then select the “Twist” filter (Menu: Effect>>Distort & Transform>>Twist…) and set the angle to 3 degree (or any some amount you want). A sketch style fill is ready.

Step 4

Adjust the stroke weight of the lines to meet your desired effect. Draw a square again of the same size you did just now for cropping the lines. Set the stroke weight into 3 to make it thicker. Draw or copy from the standard RSS vector image. Apply the Tweak and Twist filter to the square and RSS icon again to make them the same style. This sketch style RSS icon is ready.

Other Icons

Using this method, we can draw many icons in the sketch style. Here is another example which is a MP3 file icon. We can use the same procedures to produce most parts of this icon. There are something more in this one, the paper and the music notes have some shades on the right. This can be done by using the Blend Tool and the Free Distort filter (Menu: Effect>>Distort & Transform>>Free Distort…)

Download the .AI source file (for Adobe Illustrator CS3)

Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…