Vandelay Design Blog » Design

Tutorial: Create A Fun Ink Splatter Vector

Vandelay Website Design — Mon, 30 Aug 2010 15:48:02 +0000

Today we released a set of ink splatter vectors on Vandelay Premier and in this post we will be covering the process of creating these vectors. The process is not very difficult and it should be easy to follow, but it does take some time.

Here is a preview of the final result of this tutorial.

These splatter vectors are fun to create, and since the end result is in vector format it is highly versatile.

Things You Will Need:

A bottle of ink (I used black India ink from a craft shop)
Paper (photo paper or heavy white paper)
A straw
A scanner
Adobe Illustrator
Adobe Photoshop
Inkscape (optional)

Overview of the Process:

In a moment we’ll be going over the specific steps and the details of each, but first let’s take a look at the basic process:

1 – Creating the ink splatter on paper

2 – Scanning it after the ink has dried

3 – Cleaning the image in Photoshop

4 – Tracing the image and saving it as a vector file

So as you can see it is not an overly complicated process, you just need some patience to let the ink dry and to complete the needed adjustments in Photoshop.

Now let’s get started.

Step 1: Creating the Ink Splatter

This is probably the most fun part, and it’s definitely the messiest. Take a piece of paper (I’d recommend either photo paper or a heavy piece of white paper) and place it somewhere that can get a little bit messy. You may want to put it on a table covered with newspaper, on your basement or garage floor, or somewhere that is protected from the ink splatters.

Your bottle of ink may come with a tube for dispensing the ink, or you can use a simple straw to collect the ink. Gather some ink in the tube or straw and splatter it on your paper. You’ll probably want to do this several times to get a good amount of ink.

Once you have a bunch of ink on the paper allow it to dry. Some types of ink are pretty thick so be sure that you are giving it adequate time to dry before scanning, or else you can damage your scanner. I allowed about 24 hours for the ink used in this tutorial to dry.

Step 2: Scanning

Once the ink is completely dried, scan it at 300 DPI and open it in Photoshop. Here is a look at my image at this stage:

Step 3: Clean Up the Image in Photoshop

As you can see from the image above, we have the splatter but it needs some work before it will be usable. To start with, there are some gray areas that need to be made white. We want to have the ink splatters as black, and the paper as white so that it will allow us to create a splatter that can be used on any background.

To get rid of the gray areas we will make some changes to the levels. Go to Image – Adjustments – Levels and you should see something like this.

Change the white level (on the right) to about 160, which will turn the gray areas to white, and change the black level (on the left) to about 25, which will make the dark areas black.

The specific levels and numbers used will be different on your image, so play with it to get a combination that makes the white areas white and the black areas black.

Here is a look at the image after simply adjusting the levels:

This is a good start, but if you look at the image at 100% you will see plenty of areas that still need to be touched up. In the image below you’ll notice some areas, especially near the edges of the splatters, where there is still a good bit of gray. We want to color all of this to black.

To do so we’ll use the brush tool with a small round tip. The size of the brush tip will depend on your particular image, smaller tips will be needed for more detailed areas.

Take the brush, with the foreground color set to black, and color the gray areas so that they become black. You’ll also want to use a white brush tip to color over any tiny stray splatters or ink spots. You may find it easiest to work with the image zoomed. The image below is at 300%.

Tracing the image to create the vector will also help with the cleanup process, but it helps to get it as clean as possible in Photoshop first. After touching up the image shown earlier, here is how it looks.

Save your image as a JPG and we’ll move on to the next step.

Step 4: Tracing the Image

Adobe Illustrator has a powerful Live Trace functionality, but after reading a tutorial on Bittbox a few years ago I have been in the habit of using Inkscape for this. Inkscape is a free program that can be downloaded here, or you can simply use Illustrator to accomplish the same thing.

Open the image in Inkscape

Go to Path – Trace Bitmap and you will see the following.

There are a lot of settings you can change here, but start with the default, it usually works pretty well for purposes like this. Click “Ok” and then X out of that box.

The trace will now be showing above the image you started with, so drag the trace to the side.

Then delete the original image that you started with, leaving just the trace.

Now click on the trace and go to File – Save As and save it as a .svg file, which we can then open in Illustrator.

In Illustrator open the .svg file.

You can inspect the image to see that it looks ok, but it should be pretty good with no need for additional clean up. At this point you can save it as a .ai file and the process is complete. You now have a versatile splatter vector that can be used whenever you need it.

Here is our final result:

The full set of 15 ink splatter vectors is available for Vandelay Premier members to download and use in their own work.

13 Ways to Challenge Yourself in Your Career as a Web Designer

Vandelay Website Design — Wed, 25 Aug 2010 13:49:40 +0000

A career in web design or development requires a constant effort to improve and to stay on top of new technologies and changes within the industry. No matter how much you improve or how many new things you learn there is always something else out there that can make you better at your work and improve your career.

Fortunately, most designers and developers receive challenges on a daily basis in the normal course of their work, especially those who work for a variety of different clients. However, there are times when a designer should focus on learning and improvement outside of these normal activities. Perhaps no project has come up that will provide an opportunity to hone skills in a particular area, or maybe you have something specific in mind that deserves extra attention.

In this article we will look at some of the ways that you can challenge yourself as a designer. This is not intended to be an all-inclusive list, there are certainly countless possibilities in this area, but it is intended to give some ideas to those of you who are interested in trying new things or improving on existing skills.

Some of the most beneficial things that I have done in my career have also been the most uncomfortable. For most of us it is easy to get in the habit of doing things in a familiar way or avoiding projects that push us beyond our comfort zone. There are times, however, when those challenges and discomfort lead to invaluable opportunities that can have a significant impact on our futures.

1. Accept Clients for Freelance Work

If you are currently working for an agency or as an in-house designer, managing some clients of your own on a freelance basis would certainly provide some outstanding learning opportunities. With your own clients you will need to consider things like pricing your work, securing the client, project and time management, financial management, communication with the client, possibly outsourcing some of the work, and meeting deadlines.

Some of these things, like time management, communication and deadlines, are likely already a part of your daily work as an employee, but when you are managing the client and the project on your own they will probably have a different type of significance.

2. Try a New Type of Layout

Do you find that you use the same type of layout on the vast majority of your projects? Maybe a fixed-width center-aligned site is not appropriate or necessary for every project, and trying something new would bring a new challenge and an opportunity to gain experience with other types of layouts.

Have you ever tried designing a horizontal website? They are not practical for most projects but learning to create one can teach some new skills that may be useful at some time in the future.

3. Seek Out Feedback and Constructive Criticism

Designers are always receiving feedback from clients and this is obviously useful and an important part of the process. But if you have not actively sought out feedback from other designers you may benefit from doing so. Concept Feedback is a great resource for designers who want to submit their work and receive honest feedback from other designers.

4. Blog

Blogging can be a great exercise for designers, whether it is publishing posts on your own blog or writing for others. The design blogging community is large and very active, so there are always plenty of opportunities. Writing an article or a detailed tutorial can be a great learning experience because if you know your work is going to be visible to the world you’ll probably push yourself to do the best that you can.

I’ll never forget writing my first post for Smashing Magazine. The thought of having my article read by an audience that large was rather intimidating, but it forced me to go further than I would if I was writing for a much smaller publication. For those of us that don’t naturally want that exposure, blogging is a valuable experience for moving out of the comfort zone and trying new things.

5. Try a Different Style of Design

Is there a particular style of design that you have never tried or that you would like to improve on (for example vintage, nature-inspired, minimalist, magazine-style, textured)? Stretching your design skills will make you more valuable and well-rounded, but often it is easy to stick with similar styles without exploring new possibilities.

If you don’t have a client that is an appropriate fit for a different style of design that you would like to try, personal projects can be a possible solution.

6. Experiment with a New Content Management System

If you find that you use WordPress, Drupal, ExpressionEngine or some other content management system on almost all of your projects, maybe you would like to try a different CMS. No CMS is perfect for every situation, so learning something new may prove to be a wise decision when the right situation comes up in the future.

The best way to know what CMSs work well in specific situations and which ones are most user-friendly is to experiment with them on your own. There is a lot of information available online regarding the different CMS options, but you can learn a lot more from some hands-on experience than you can from reading about someone else’s experience.

7. Use HTML5 and CSS3

If you’re not already familiar with HTML5 and CSS3 they are certainly an area for potential improvement that will open up new opportunities and new ways of doing things in your projects. Here are some learning resources:

8. Write a Book or E-Book

We already talked about the opportunity that blogging presents for challenging yourself, but that’s not the only possibility for those who like to write. Writing a book or an e-book is now a realistic option for just about anyone. Services like Lulu make it possible to publish a book independently, and e-books are of course easy and inexpensive to produce.

Covering a specific topic in a book or an e-book will force you to really dive into the subject, and you’re bound to learn plenty along the way. Of course, you’ll probably not want to attempt to write a book on a topic that requires extensive learning on your part, but even writing about a subject at which you are well versed can present learning opportunities and experiences that will improve your abilities.

9. Sell Stock Graphics

Marketplaces like GraphicRiver and stock photo sites like iStockphoto allow designers to sell stock graphics like vectors, illustrations, and icons. Designing these types of items presents unique challenges that are not a part of the client process.

Selling stock graphics can also provide a nice secondary income and can also be a great fill in activity when client work is slow or between projects. (Vandelay Premier members can see the interview with Ryan Putnam for a detailed look at the process of selling stock graphics.)

10. Sell Themes or Templates

Similar to selling stock graphics, you can also design and code template or themes (premium WordPress themes are especially popular) to be sold. Selling themes/templates has become a significant source of income for many designers, but even if making money is not your primary goal designing for a mass audience rather than designing for a specific client will present some new challenges.

When it comes to actually selling your work you can either use a marketplace or manage the sales on your own through your site. If you’re primarily focusing on it as a way to learn and challenge yourself you’ll probably want to use a marketplace like ThemeForest, which can save huge amounts of time as compared to setting things up to sell from your own site.

11. Answer Questions on Forums

There plenty of design and development related forums where users interact and look for help and guidance from other users. If you’re looking for a way to challenge yourself why not take a few minutes to browse through some forums and attempt to answer questions from other users?

In some cases you may be able to answer the question easily based on your experience, but at other times you may want to answer a question that requires research or experimentation on your part. This is a great opportunity to stretch your own skills and knowledge in areas that are likely to be valuable to you at some point in the future, and it will also be appreciated by others.

12. Take Up Photography

Photography is a hobby of many designers as there is often some overlap in the creative areas of both. If you’re not already active with photography taking the time to learn some basics may even help you to learn some new things that can be applied in your design work.

13. Identify Your Weak Areas

All designers have areas of strength and weakness. You’re probably already aware of some areas where you could use improvement, but if not, try to take an objective look at your work and your experience. What area of your work are not as strong as they could be? By identifying and improving your areas of weakness you will make yourself a more complete designer and more valuable to your clients or your employer.

What’s Your Experience?

Do you make an effort to challenge yourself and to improve your skills? If so, how do you do it?

Free Set of High Res Plain Brown Paper Textures from Vandelay Premier

Vandelay Website Design — Wed, 18 Aug 2010 11:48:51 +0000

A few weeks ago we launched Vandelay Premier, a membership-based site that provides premium-quality design and career resources. Today we’re releasing a free set of 4 plain brown paper textures as a sample of what is available for members. These textures can be downloaded and used by anyone, and the standard Vandelay Premier extended license applies to this free set as well.

The textures can be downloaded from their page at Vandelay Premier. If you enjoy the textures please take a moment to see the other resources available at Vandelay Premier, or take the tour.

25 of the Best Calligraphy Fonts for Designers

Vandelay Website Design — Wed, 07 Jul 2010 11:04:37 +0000

Having the right fonts is critical to successful web and graphic design. Fortunately, there are a lot of quality free fonts that are available for use. In this post we’ll feature 25 of the best calligraphy fonts for download. Be sure to check the restrictions of any font before using on a commercial project.

Freebooter Script

Renaissance

Porcelain

Kingthings Foundation

Kingthings Calligraphica

Florante at Laura

Tangerine

MotherproofScript

Billy Argel Font

Gothic Ultra

Scriptina

Scriptina Pro

Adorable

Selfish

Arabella

Handshand

Juergen Italic

Brock Script

Gondola SD

Kells SD

For more on fonts and typography please see:

35 High-Quality and Free Paper Textures

Vandelay Website Design — Mon, 05 Jul 2010 11:33:27 +0000

Paper textures are extremely useful and versatile in web and graphic design. Whether it is brown paper, notebook paper, wrinkled paper, or something else, they are frequently used by designers. In this post we’ll feature some of the best free paper textures. Always be sure to check the license and terms before using.

For more textures please see:

For more design resources please see:

35 High-Quality and Free Concrete Textures

Vandelay Website Design — Mon, 28 Jun 2010 11:09:38 +0000

Concrete textures are great for adding some character to your web and graphic design projects. In this post we’ll feature 35 concrete textures from various sources. If you see something you like, click on the image and you will be led to the source. Be sure to read the license or terms of use, especially if you are planning to use it for a commercial project.

For more on textures please see:

25 Beautiful and Free Thin Fonts

Vandelay Website Design — Mon, 14 Jun 2010 11:25:17 +0000

Typography is a critical aspect of web and graphic design, but finding the right font can often be a challenge. If you’re looking for a quality thin or light font, this post should be an excellent resource for you. Here you’ll find 25 free thin fonts. As always when dealing with freebies, be sure to check the license before using it in your own work.

District Thin

Champagne & Limousines

Garogier

Spirequal Light

Aaargh

Colaborate

Asenine

Bonveno CF Light

Caviar Dreams

Greyscale Basic

Typo Slab Serif

Engel Light

For more resources please see:

45 Free Wood Textures

Vandelay Website Design — Fri, 11 Jun 2010 11:11:20 +0000

The use of textures can be an easy way to add character to a design. Wood textures are particularly common in web design, and in this post we’ll featuring 45 free wood textures. If you’re looking for a texture to use in your own work hopefully this will be helpful. As always when you are dealing with freebies, be sure to read the license before using it.

For more on textures please see:

35 Excellent Adobe Fireworks Tutorials

Vandelay Website Design — Tue, 01 Jun 2010 14:01:13 +0000

Adobe Fireworks often gets overshadowed by Photoshop, but it too can be an excellent tool for designers. If you’re not experienced with Fireworks you may want to browse through some online tutorials to get a feel for the program. In this post we’ll feature 35 of the best tutorials for Fireworks.

How to Create a Stylish Navigation Bar in Adobe Fireworks

Create a Collage by Fading Images in Fireworks CS4

Masking in Fireworks CS4 (video)

Fireworks 101 (video) and Fireworks 101 Part II (video)

Fireworks CS4 CSS Export (video)

Fireworks CS4 Color Management (video)

Fireworks CS4 Layout Tools (video)

Build a Professional iPhone App Website Wireframe in Fireworks

Create a Vibrant Digital Collage Mixing Buildings and Vector Shapes on Paper

Creating Fading Light Vectors in Fireworks

LED Cinema Display in Fireworks

The Abduzeetles Rockband Website in Fireworks

Website Design Tutorial: Wellknown.as Case

Creating an Amazing Palm Pre Icon on Fireworks

How to Use Quick Mask

Awesome Light Effects in Fireworks Inspired by James White’s O Series

Awesome Floral Type in Fireworks and Photoshop in 5 Minutes

Classy Personal Portfolio in Fireworks

Amazing Neon Lights on Fireworks

Creating the iPhone Frame on Fireworks

Circular Shadows and Highlights

Dot Matrix Effect

Extracting Logos

Designing for Mobile Devices Using Fireworks CS4

Golden Seal

Photo Realistic

Create Vista-Like Wallpapers with Fireworks

Old Paper Effect in Fireworks

Jewel Button

Five Easy Steps to Create a Barcode in Fireworks

Creating a Thick Text Outline

Shiny Ribbon

Adobe Fireworks CS4 Photo Blur Effect

How to Create Blend Mode with Adobe Fireworks CS4

Altes Web Logo Tutorial

25 Examples of Amazing Packaging Design

Vandelay Website Design — Fri, 28 May 2010 10:59:55 +0000

Packaging design can make a profound difference on the sales of a product and how it is viewed by customers. In this post we’ll provide a showcase excellent package designs for your own inspiration. Web designers often need to turn to offline source of inspiration rather than only seeking inspiration from other web designs.