Articles tagged as ‘Tutorials’

Create a Drippy Spray Paint Vector

Spray paint and splatter effects are very commonly used in web and graphic design. There are a number of Photoshop brushes and vectors available that can be used to add these effects to your work, but sometimes you may not be able to find exactly what you are looking for, or what you find may not be licensed for what you need.

In these situations you can create your own, and it’s not as difficult as you might think. In this tutorial we’ll create a spray paint vector that can be used in any number of different ways. The vector that we are creating here is a part of the spray paint vector set available at Vandelay Premier. Here is a look at what we will be creating:

Create a Drippy Spray Paint Vector

Read More ».

Create Re-Usable Button Styles in Photoshop

Buttons are an extremely common design element that are used by almost every website. Web buttons are critical for usability and navigation, and they can also be used to help direct the action of the user as you encourage them to add a product to a shopping cart, take a tour, get more information, or contact you.

Creating new buttons while keeping the same style can be very simple by using Photoshop’s layer styles. In this post we’ll take a quick look at how you can create your own button layer styles to save yourself some time.

You may have had situations in the past where you found yourself creating multiple buttons for a mockup and adding the same layer styles over and over again. Or you may have wanted to create a new button that matches the style of an existing button, but you can’t remember the details of the layer effects that were used. Both of these situations could be made much easier if the button effects were saved as a layer style that could be re-used at any time.

Layer styles are a preset in Photoshop, like brushes, patterns, and custom shapes. Layer styles can be saved as an .asl file and then can be loaded at any time, or distributed with others working on the project.

Creating Button Styles

Let’s start by creating a basic button in Photoshop.

Set the foreground color to #166ecc and the background color to #4495ee. Select the rounded rectangle tool with a radius of 10 pixels and draw a rectangle that is 250 pixels wide and 40 pixels high.

Create Re-Usable Button Styles in Photoshop

Read More ».

How to Create a Set of Hand-Drawn Design Elements

Some of the more popular resource packs at Vandelay Premier have been those that are created to be used with hand-drawn or doodled designs. While we aim to provide resources that are as useful as possible, there may be times when you need a specific design element that you can’t find anywhere. In that case, you can create your own, and in this tutorial we’ll show you how.

We’ll be creating a small set of hand-drawn resources, but using the techniques covered in this post you’ll be able to create as much or as little as you need. While stock resources can be great for saving time in your design process, creating your own resources can often be a lot of fun, and with hand-drawn design this is definitely the case.

How to Create a Set of Hand-Drawn Design Elements

Read More ».

Create a Plaid Pattern in Photoshop

Patterns can be extremely useful for quickly creating backgrounds for your work. Having a diverse catalog of Photoshop pattern sets at your disposal will make it easy to try a variety of different patterns. In this tutorial we’ll walk through the process of creating a plaid pattern, which you can then duplicate with other color combinations to compile your own set of plaid patterns.

Here is a look at what we will be creating:

Create a Plaid Pattern in Photoshop

Read More ».

Getting Started with E-Junkie for E-Commerce

Finding the right e-commerce system can be a time consuming and frustrating process. No e-commerce platform is ideal for every situation, but we have found E-Junkie to be very easy to set up and flexible enough to meet the needs of many websites and businesses. In this post we’ll go through the process of getting started with E-Junkie and setting up a product to sell. We’ll also show you how to manage the affiliate program included with E-Junkie and how to set up a coupon code that can be shared with your customers.

What is E-Junkie?

E-Junkie provides “buy now” and “add to cart” buttons and a shopping cart that will allow you to sell digital products or tangible goods. It does not include a content management system like many e-commerce solutions, rather, you can use E-Junkie with the CMS of your choice. This separates E-Junkie from a lot of open-source and hosted e-commerce systems, which may be a good or bad thing depending on your needs. It integrates with PayPal, Google Checkout, Authorize.net, ClickBank, and several other payment processors.

We started using E-Junkie a few months ago on Vandelay Premier, where we sell graphic design resources. In our case, we were specifically looking for an option that would allow us to sell digital products while still using WordPress as a CMS. While we looked at several different options, E-Junkie proved to be the best fit for us and it was quick and easy to set up.

A lot of online shops that sell digital products use E-Junkie because it does a great job of handling the secure delivery of digital files, and it has a number of additional features that some of the other “light” e-commerce solutions do not offer.

The cost of using E-Junkie will vary greatly from one user to another. The cost starts at $5 per month and that allows you to sell 10 different products and it gives you 50 MB of storage space if you’re selling digital products. Prices increase depending on the number of products and amount of disk space, although you can opt to host the files yourself in order to save money on the disk space. The lowest-priced plan that allows for self-storage of digital products costs $18 per month. There are no bandwidth costs and no transaction fees.

Read More ».

Design a Portfolio Site in Photoshop

The portfolio site is critical factor in the success of a freelance designer or a design studio. Today we’ll be going through the process of creating a homepage layout of a portfolio site in Photoshop. The design we will be creating is available for download to Vandelay Premier members. The download includes the PSD files for the homepage and 2 secondary pages in three color schemes.

Here is a look at what we will be creating (click the image to view it in full size).

Portfolio Design Photoshop Tutorial

Read More ».

Create a Grunge Texture Brush in Photoshop

Create a Grunge Texture Brush in Photoshop

Textures are commonly used in web design and other types of graphic design, and fortunately they are relatively easy to work with. You can use a photograph to create texture, but Photoshop brushes also present a simple way to add texture to your work.

While there are a lot of Photoshop brushes available for creating texture, there will be times when you’ll want to create your own. By creating your own brushes you’ll have more control over the final outcome and once you have the brushes completed you will be able to re-use them whenever you want to quickly add texture.

We recently released a set of 25 grunge texture brushes for Vandelay Premier members and in this tutorial I will go through the same process that was used to create those brushes.

Read More ».

Create an Advanced Contact Form for Client Inquiries

Most web designers rely on inquiries from their portfolio website to produce a decent portion of their business. Contact forms can be very simple, collecting a name and contact information, or they can be much more detailed, providing enough information to get an estimate. While the primary purpose of the contact form on our website has always been to make it easy for potential clients to contact us about web design projects, there are also a number of other reasons that visitors use the contact form and a one-size-fits-all approach has its drawbacks. We recently changed the contact form to include some conditional fields that make the form more customized according to the reason the visitor is contacting us, and in this post we’ll go through the process of creating this type of form.

The form we’ll be creating will contain some basic fields (name, email, phone, website, and message) that are shown to all visitors who are filling out the form, but based on the reason they are contacting us they will also see a few other more specific fields. If the visitor selects “Web Design Services” as their reason for contacting us they will be prompted to tell us if it is a new website or a re-design, enter a budget, and tell us how they found us. If they select “Content Development Services” they will also be prompted to enter a budget, but with different options than the budget for web design services, and so on.

In the past our contact form has included a field to allow visitors to select a budget, but that was based on the assumption that they were contacting us regarding web design services. Since the budget field isn’t applicable for someone who is filling out the contact form just to say hi, this “advanced” form will only show what is relevant based on user input.

Read More ».

Tutorial: How to Make a Photoshop Brush Set

Photoshop brushes are used all the time by designers to create stunning graphics quickly and easily. While there are plenty of free and premium Photoshop brushes available for download, there are times when you can’t find an existing brush or brush pack that meets your needs. Or maybe you’ve found one that would be perfect, but it’s not licensed for use on commercial projects. In these situations you can create your own custom brushes and use them however you choose.

In this tutorial we will be going through the process of creating a Photoshop brush that resembles a realistic paint brush stroke. Although there are already a number of brush packs of this kind available, being able to create your own will give you more flexibility. Here’s a preview of what we will be creating.

Tutorial: How to Make a Photoshop Brush Set

Read More ».
Page 2 of 212