Create Eye-popping Graphics with Photoshop Brushes

The Photoshop brush tool can do a whole lot more than make fuzzy-edged shapes. In this article, you’ll learn how to use the Photoshop Brushes palette to create some awesome graphic effects to use on your web sites. We’ll also cover how to expand your brush options even more by loading other people’s brushes and even making your own!

Mimicking Nature

Let’s take a look at how we can use Photoshop to create a beautiful scattering of leaves. If you have yet to experiment with Photoshop brushes, you might be thinking that we’ll be creating these leaves individually — rotating them, squishing, coloring, and otherwise transforming them, until they’re perfectly and uniquely arranged.

Not so! With the power of Photoshop brushes, creating an effect similar to this can take you minutes, rather than hours!

Create Eye-popping Graphics with Photoshop Brushes

In Photoshop, select the Brush tool (B). From the Options bar, click the little arrow next to the brush to display all of the available brushes. Look for the leaf brush, circled in red below.

Create Eye-popping Graphics with Photoshop Brushes

If you don’t see it (the leaf brush should be available in Photoshop CS2 and above), you may need to reset your brushes. The flyout box — called the Brush Preset picker — has another small arrow; click this to reveal the brush options and then choose Reset Brushes.

Create Eye-popping Graphics with Photoshop Brushes

By itself, the brush draws a leaf shape when you click once on your image canvas. If you click and drag, however, you get a line of leaves, like the one shown below. How closely they are spaced depends on how quickly you move your mouse.

Create Eye-popping Graphics with Photoshop Brushes

Open up the Brushes palette and start playing with the options. Here are some things you can try.

Under Brush Tip Shape, make sure the Spacing checkbox is checked, and move the slider to about 80%.

Create Eye-popping Graphics with Photoshop Brushes

Next, click on Shape Dynamics. For all of the jitter-related settings (Size Jitter, Angle Jitter, and Roundness Jitter), drag the sliders to 100%. Also check the Flip X Jitter and Flip Y Jitter checkboxes. You can see how this might affect the brush in the preview box.

Create Eye-popping Graphics with Photoshop Brushes

Now click on Scattering, and increase the Scatter amount, checking the Both Axes checkbox while you’re at it. This setting determines how far away from the brush stroke the leaves might end up — I’ve set mine to around 300%. If you like, you can also increase the Count, which affects how many leaves appear, and the Count Jitter, which will randomize the number of leaves.

Create Eye-popping Graphics with Photoshop Brushes

The next set of parameters that we’ll modify affect the color dynamics of our brush. Click the Color Dynamics check box; this page allows you to control the color of the leaves and provide some variation between each shape. I’ve increased the Hue and Saturation Jitter amounts just slightly. Unfortunately, the Photoshop preview feature doesn’t show these color jitter effects, but you can always come back to this window and adjust the settings should you wish to increase or decrease the color variation.

Create Eye-popping Graphics with Photoshop Brushes

If you want, you can also try changing the Other Dynamics settings to vary the opacity and flow. For this example, I want my leaves to be solid, so I haven’t tweaked any of these settings.

Now you’re ready to test out the brush! In the figure below, I’ve shown the rough path that I’m going to follow with the brush tool in the top window. The bottom window shows the results of following this path with our new brush:

Create Eye-popping Graphics with Photoshop Brushes

At this point, you can go back to the Brushes palette and adjust the different settings, including the size of the brush, to try out different effects. Each time you use the brush you’ll get slightly different results, but as you play with the palette, you’ll find a combination that you like.

Photoshop comes with other built-in brushes that provide similar effects. Click on the arrow in the Brush Preset picker as if you were resetting the brush, and you’ll see a list of the other available brush libraries. Under the Assorted Brushes option, try the snowflake or star brushes. Under the list of Special Effect brushes, you’ll find some floral shapes, a butterfly shape, and even a rubber duck!

Create Eye-popping Graphics with Photoshop Brushes

Easy Grunge

You can use the concept that we just learned for mimicking nature to easily create a successful grunge effect. In the following example, I’ll use different Photoshop brushes to create a rusty, grungy look for a web site header graphic, like the one pictured below.

Create Eye-popping Graphics with Photoshop Brushes

Start by resetting your brush options as described in the last example. Then, select one of the spatter brushes from the Brush Preset picker.

Create Eye-popping Graphics with Photoshop Brushes

Play with the options in the Brushes palette. Here are the exact settings that I modified:

  • Brush Tip Shape
    • Spacing: Increased to 14%
  • Shape Dynamics
    • Size Jitter: 100%
    • Angle Jitter: 62%
    • Roundness Jitter: 21%
    • Flip X Jitter and Flip Y Jitter selected
  • Scattering
    • Scatter: Both axes, 274%
    • Count: 2
    • Count Jitter: 52%
  • Other Dynamics
    • Opacity Jitter: 35%

Next, fill the background layer with a rusty orange color (#b26d0a) and create a new layer by clicking on the New Layer icon in the Layers palette.

Set the Foreground color to a slightly darker shade (e.g. #a26103). Using the Brush tool, paint across your image so that you cover most of the canvas. This produces a subtle textured effect like the one shown below.

Create Eye-popping Graphics with Photoshop Brushes

Now set the Foreground color to an even darker shade (I’ve used #8b5200). Create another new layer using the Brush tool, and add a few strokes in different areas to continue to build up your grunge effect.

Create Eye-popping Graphics with Photoshop Brushes

Continue to add different layers and colors until you’re happy with the effect!

Create Eye-popping Graphics with Photoshop Brushes

Another thing you can try, rather than using different colors, is to change the Mode in the options bar to specify a different option, such as Multiply, Color Burn, or Color Dodge. You’ll want to lower the opacity of your brush so that the effect isn’t too overwhelming. Use the brush tool directly on your background layer; below is an example in which I’ve used the Color Dodge mode:

Create Eye-popping Graphics with Photoshop Brushes

Here’s the result I achieved after using Color Burn, Multiply, and Screen at different opacities:

Create Eye-popping Graphics with Photoshop Brushes

Be sure to explore the other spatter and artistic-type brushes available in Photoshop when creating your own grungy or distressed effects!

Loading Other People’s Brushes

You aren’t limited to the standard built-in Photoshop brushes. Many wonderful — and often free — brushes are available from other artists and designers. Running a web search for the term "Photoshop brushes" will yield many resources. Typically, when you download the brushes, you’ll receive an .abr file. You can move this into your Photoshop brush folder location (usually Program FilesAdobeAdobe Photoshop XPresetsBrushes on Windows machines, and Library/Application Support/Adobe/Adobe Photoshop X/Presets/Brushes on a Mac, where X is the version of your copy of Photoshop). Click on the small arrow in the Brushes palette or options flyout and choose Load Brushes, then select that .abr file.

Making Your Own Brush

Still can’t find the brush you’re looking for? Photoshop allows you to make your own custom brush. Perhaps you want to make a cool scattering of your logo mark, or maybe you’re just after a specific shape for your brush effect — either way, you can take full control over the shape of your brush by creating it yourself!

The basic idea is simple:

  1. Create a grayscale image for your brush. The actual size of your image will be the "maximum" size of your brush before things get blurry.
  2. Select the image and save it as a brush.
  3. If you want, save the brush into a collection of your other brushes so that you can reload it in the future.

Here’s a specific example to illustrate the steps:

1. Creating the grayscale image

You can create your brush in a variety of ways:

  • by creating a vector image in Photoshop (or using another program, such as Illustrator, and importing it into Photoshop as an image)
  • by drawing your own image using existing tools in Photoshop
  • by utilizing part of a photo or scanned image

Just keep in mind that the solid black areas of your image will result in a solid color, while gray areas will result in transparency.

In this case, I’m going to keep it simple by using one of Photoshop’s built-in vector shapes to create a music note-shaped layer:

Create Eye-popping Graphics with Photoshop Brushes

Now, right-click on the shape layer and choose Rasterize Layer.

2. Saving the shape as a brush

Now, make a selection of the document or the area that you want to define as the brush shape. In the figure below, I’ve used the marquee tool to create a rectangle that surrounds the music note.

Create Eye-popping Graphics with Photoshop Brushes

Next go to Edit > Define Brush Preset. A (slightly squashed) preview of your custom brush displays, and you can give your brush a name.

Create Eye-popping Graphics with Photoshop Brushes

When you view the Brush options, you’ll see that your new brush is listed among the rest:

Create Eye-popping Graphics with Photoshop Brushes

You can now use your brush like any other!

Create Eye-popping Graphics with Photoshop Brushes

3. Saving your brush set

Your brush will remain in the Brush picker until the next time you load a new set of brushes, at which point you may lose your custom-designed brush.

If you want to save your brush, you can do so by saving the entire set of brushes. Click on the small arrow in the Brush palette or the Brush Preset picker, and choose Save Brushes. This will save an .abr file that you can reload later on. (If you want, you can delete the other brushes in the preset that you don’t want to save, in order to create a set containing only your own custom brushes.)

Once you locate the .abr file to which your brushes have been saved (it will have been saved to the Brushes folder mentioned above), you can copy and share your custom brushes with others.

Summary

Using the Brushes palette to tweak the way Photoshop renders a brushstroke is a powerful technique for creating stunning, unique graphic effects of your own in minutes. Once you’ve mastered the challenge of tweaking the built-in brushes, you can extend this technique to use other brushes. You can even create your own custom-designed brushes, expanding your brush power infinitely. Try out these techniques and master Photoshop brushes today!

Replay

Category: software Time: 2008-02-20 Views: 0
Tags:

Related post

  • Create a Blueprint Effect With Photoshop 2012-08-07

    Many projects in Photoshop can be very easy if you know how to approach them. For example, creating a grid in Photoshop isn't as straightforward as most designers think it would be. In Adobe Illustrator, there is an actual grid tool, but this feature

  • How to create a Bitmap Font, with Photoshop? 2012-05-02

    I want to create a custom font to use for a game, and it must be a Bitmap font. So the spacing etc between characters must be equal. Now I don't know much of Bitmap fonts. The font itself will be a black Century Gothic with a white stroke. I could ju

  • Is it possible to create a vector logo with photoshop? 2016-07-10

    I am attempting to create a logo for a website and I have read that it is a good idea to create a vector logo. Can I do this with photoshop? Any tutorials and or books that you would recommend that I purchase?

  • Transform Your Images And Create Bolder, Better Colors With Photoshop's LAB Mode 2012-05-07

    Photoshop is obviously a great tool for editing images, but Photoshop's extensive color capabilities are often underutilized. Depending on your purposes, certain color modes in Photoshop can transform your work from "properly edited" to dazzling

  • How to Create Photo-filled Text with Photoshop 2014-07-22

    Photo: Sri Putri Julio Designing for the web has always been a fast-developing field where a professional has to skillfully combine visual information design, aesthetics and composition priciples with the most relevant current ideas and trends to sat

  • How can I create a rectangular graphic with curved edges? 2012-06-08

    I want to make some button shaped graphics that would essentially be a rectangular shape with curved edges. In the example below I have used Polygon rather than Rectangle so as to take advantage of VertexColors and have a gradient fill. The code belo

  • How to create a modern arrow with Photoshop's line tool? 2014-09-25

    I'm attempting to create a stylized breadcrumb (below) but am botching the arrow. Is there a more precise and 'economical' method of creating this type of arrow? Preferably one where I retain control of the stroke width and corner radius. The way I'v

  • Creating Web 2.0 Effects With Photoshop, Part 2 2008-01-09

    In the first of this two-part series, we looked at how to create a number of Web 2.0 visual effects in Photoshop, including gradients, stripey backgrounds, transparency, reflections, and more. In this article, we're going to look at a few more effect

  • How to create vector graphics In Photoshop CS6 2013-05-08

    I know people prefer using CorelDraw or Adobe Illustrator, but I want to know if there is a technique I can follow to use Adobe Photoshop CS6 to make vector Images. --------------Solutions------------- TL;DR: Photoshop can not create true vector imag

  • Create a banded gradient in Photoshop? 2015-09-28

    I`m trying to create a banded gradient with Photoshop, similar to the one pictured on this packaging: Can I achieve this with a normal gradient in Photoshop or do I have to create this rectangle by rectangle? --------------Solutions------------- It's

  • Create a Bursting Spark Effect with Photoshop 2012-05-17

    Almost anything can be made with Photoshop. All it takes is the right combination of tools to get the job done. Type is no exception, and in Photoshop, you can make your type stand out with a variety of eye-catching techniques. The possibilities are

  • Create a Reusable CSS Menu with Photoshop 2012-02-13

    In web design and development, you'll find that there are many different techniques to meet a given goal. Some are good, and some are great, but as long as your chosen method works well and looks good, you should use it with confidence. To complete a

  • How can I create a coffee cream effect with Photoshop? 2012-11-27

    Today I would like to create a coffee cup with the cream floral on it as a text by using Photoshop. It looks like you order a cup of hot cappuccino and the bartender will draw a flower with cream on the surface of coffee but now I want to make it lik

  • Creating see-through graphics for window decals in Photoshop 2013-09-05

    I would like to create transparent graphics for window decals using Photoshop CS6. The graphics should remain transparent after being printed on foil. By transparent I mean see-through, e.g. a set of light grey lines that you could actually see throu

  • Best option to create vector graphics with LaTeX labels 2012-10-24

    I would like to create some vector graphics for my LaTeX documents. The graphics would often contain mathematical expressions that would should be typeset using LaTeX. As far as I know, my best options are: Using Tikz or similar packages Use Inkscape

  • Will the Radeon HD 7670M + 7670M Dual Graphics Work Well With Photoshop CS5? 2013-01-05

    I have just recently purchased the HP Pavilion M6 15.6" Laptop - Silver (AMD A10-4600M / 1TB HDD / 8GB RAM / Windows 8). This laptop has a AMD Radeon HD 7670M + 7670M Dual Graphics.I am having some troubles with my photoshop CS5. The grey screen when

  • Is there a way to create a dockable palette for Photoshop with ScriptUI? 2013-01-21

    I am using ScriptUI for the first time and would like to create a custom palette with several text boxes and buttons that can be conveniently docked into the Photoshop UI. Can this be accomplished using a script? --------------Solutions-------------

  • How to create pop-ups with graphs on point layers? 2013-07-10

    i have a postgresql database which is refreshed all 10 minutes and i need to create graphs in pop-up with the data. When i click, a pop-up (or annotation ?) appears. How can i make it possible ? Thanking you in anticipation --------------Solutions---

  • How to create a batch job, creating .psd files by image name (each line has a unique name in CSV file) with photoshop ? 2013-08-16

    I am new to Photoshop. I have a Photoshop template with 3 text layers. How to create a batch job for: creating .psd files by image name (each line has a unique name in CSV file) with Photoshop ? Then I want to replace three text layers with my text i

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 1.050 (s). 13 q(s)