Post pobrano z: Create Light Painted Typography From Scratch in Photoshop

This tutorial was originally published in April 2011 as a Tuts+ Premium tutorial. It is now available free to view. Although this tutorial does not use the latest version of Adobe Photoshop, its techniques and process are still relevant. 

If you’ve ever attempted to write words using traditional light painting photography techniques, you probably know how challenging it can be to create words that are easy to read. In this tutorial, we will demonstrate how you can create a similar look without a camera and tripod. Let’s get started!

And for more insane lighting effects, check out our awesome selection of Light Painting Photoshop Actions from GraphicRiver. Or enlist the help of one of the talented professionals from Envato Studio for your custom typography needs.

1. How to Sketch Out Your Composition

Step 1

Let’s start in Photoshop. Launch the program and create a new document. When creating everything from scratch, it’s always a good idea to make it really big. That way an A2 format can later be chopped up and cropped in any other format desired. We’re going to create a borderless illustration for an A2 and later crop it into an A3. So create a new document with these sizes: W: 42.5cm, H: 59.4cm, 300 dpi, CMYK.

We want the overall shape to form a heart, so draw a heart really quickly.

Step 2

Use the guideline to draw in your text with a tablet. Consider this a sketch. If you’re more comfortable doing this on paper, do it and scan it.

Step 3

For this single step, I’m going to switch to Illustrator. I’m more comfortable with ol’ Illy when it comes to lettering, but it’s entirely doable in Photoshop too. Once you’re done, Copy it (Command/Control-C).

2. How to Create the Multiple Lines

Step 1

Paste it in Photoshop as a Path (Command/Control-V, select Path in the pop-up dialog).

Step 2

Select the Brush Tool (B) and change your brush to a 100% soft edged, 10 px diameter brush. Grab the Pen Tool (P), right-click and select Stroke Path. In the pop-up dialog, make sure Simulate Pressure is not checked and press OK.

Step 3

Go to Filter > Blur > Motion Blur. Change the direction to a 60 degree angle and strength to 20. Press OK.

Step 4

Reduce the Opacity by approx. 50% and Duplicate it. Apply a Layer Mask (Layer > Layer Mask > Reveal All) and start to hide away portions with a large, black, soft brush.

Step 5

Grab the Pen Tool and trace your first light streak in Path Mode.

Step 6

Just as you did before, stroke the path with a 10 px brush. You need to do this individually in order to keep the appearance realistic. Alternate between 5, 10 and 15 px brushes and various levels of Opacity.

Step 7

After you’ve applied it, you need to hide both ends of the line. Use a Layer Mask and draw with black on each end.

Step 8

Use the original lines only as a guide. Start to add thickness to the letters, but preserve a classic typeface look by keeping the top and bottom of the bowls thin, and the sides thick.

Step 9

As you progress with the words, try to thicken the left side of each letter. Doing so will preserve the spacing between the letters.

Step 10

Remember to fade out each end of the lines, otherwise they won’t look real.

Step 11

Work your way through the letters until you have reached a similar result.

3. How to Add Color

Step 1

By now, it’s a good idea to nail the colors of the project. Above all other layers, create a Gradient Map Adjustment Layer (Layer > New Adjustment Layer > Gradient Map) Use these colors: #000000; #54000c; #d69f0a; #fffee9.

Step 2

Leave the Adjustment Layer always on top. Now that we’ve finished the lines, it’s time to add glows. Repeat the path creation process, but this time use a very large size (100–200 px) and enable Pressure Simulation. As a color, use a 50% gray (#8c8c8c). Change the Layer Style to Screen.

Step 3

Cover all the thicker portions of the letters with similar glows.

Step 4

It’s time to add even thicker lines, but with Pressure Simulation enabled and white color. Use lines of varying widths (25–75 px).

Step 5

Add thicker, soft white lines all over the letters.

4. How to Add Flares to the Letters

Step 1

Download this flare image and place it in your project. Rotate it until the angles of the rays are at 90 degrees. Set the Layer Style to Screen.

Step 2

Duplicate the flare, and double its size. Rotate it by 45 degrees.

Step 3

Go to Filter > Blur > Gaussian Blur, and use approx. 30 px to soften the secondary flare.

Step 4

Duplicate this flare (both layers) and place it around the scene in points of interest.

Step 5

Repeat the previous steps to achieve the same effect for the bottom text.

Step 6

Create a few more lines around the scene that follow the original path only to a certain point. Make them white, and of different Opacity levels.

5. How to Add Bokeh

Step 1

Open the blurry lights image and place it in the document. Set its Layer Style to Screen.

Step 2

Apply a Layer Mask and mask out portions of the image that have lights under the crop of the image. Make sure all the lights that are left aren’t sliced.

6. How to Enhance the Light

Step 1

In order to add a bit of contrast to the lights image, add a Black and White Gradient Map Adjustment Layer and make it a Clipping Mask for the lights image. Set its Layer Style to Overlay.

Step 2

Duplicate the lights image and apply it to different parts of the image. Use composites where you combine large dots with small.

Step 3

Apply the image to different points of interest. Try not to make it too heavy.

Step 4

We’re now going to combine these lights with a custom brush to make our own. Create a new brush, and change the settings as seen below.

Step 5

Keep Shape Dynamics on and change the Scatter to 550.

Step 6

Enable Other Dynamics and change the settings.

Step 7

Use this brush to draw much finer blurry lights along the letters.

Step 8

Repeat this process.

7. How to Add Noise

Step 1

We’re now going to add some noise without damaging the colors and lighting. Choose a 50% gray and fill an entire blank layer with it. It will appear brown because it is underneath the Gradient Map Layer.

Step 2

Go to Filter > Noise > Add Noise and add a max amount noise filter.

Step 3

Blur it by 0.8 px (Filter > Blur > Gaussian Blur).

Step 4

Change the Layer Style to Vivid Light and Opacity to 5%.

Step 5

And as one last adjustment, go to Layer > New Adjustment Layer > Photo Filter. Choose the red one.

Awesome Work, You’re Now Done!

Great work! Feel free to share your own end results in the comments to show others.

Light Painting Photoshop Actions From GraphicRiver

Love typography and light paintings? Create super awesome text effects yourself by downloading one of the awesome Light Painting Photoshop Actions from GraphicRiver. Try these on your favorite quotes and more and check out one of our best sellers below!

Magic Light Photoshop Action

Create wicked light effects in a matter of seconds with this cool Photoshop action. A fully customizable action that allows you to make light effects out of any shape or raster, this download comes complete with light brushes. Create stunning effects in no time with this one-click Photoshop action.

Post pobrano z: How to Create a New York Stamp Icon Set in Adobe Illustrator

In today’s tutorial, we’re going to pull
out our architect hats and learn how to “build” our very own miniaturized set
of New York’s most iconic buildings, using nothing more than the basic shapes
and tools that we work with on a daily basis.

So, assuming you’ve
already refilled your coffee mug, let’s get to it!

And don’t forget, you can always expand your collection by going over to
GraphicRiver, where you’ll find tons of awesome vector buildings.

1. How to Set Up a New Document

Since I’m hoping that you already have
Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N)
using the following settings:

• Number
  of Artboards: 1
• Width:
  800
  px
• Height:
  600
  px
• Units:
  Pixels

And from the Advanced tab:

• Color
  Mode: RGB
• Raster
  Effects: Screen (72ppi)
• Preview Mode: Default

Quick
tip: some of you might have noticed that the Align New Objects to Pixel Grid option
is missing, which is because I’m running the new CC 2017 version of the
software, where great changes have been made to the way Illustrator handles the way shapes snap to the underlying Pixel Grid.

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons
using a pixel-perfect workflow, we’ll want to set up a nice little grid so that we can have full control
over our shapes, that is if we’re running the older version of the software.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:

• Gridline
  every: 1 px
• Subdivisions: 1

Quick
tip: you can learn more about grids by reading this
in-depth piece on how Illustrator’s Grid System works.

Step 2

Once we’ve set up our custom grid, all we
need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.

Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my how
to create pixel-perfect artwork tutorial, which will help you widen your
technical skills in no time.

3. How to Set Up the Layers

With the New Document created, it would be
a good idea to structure our project using a couple of layers, since this way
we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of four
layers, which we will rename as follows:

• layer 1: reference grids
• layer 2: empire state building
• layer 3: chrysler building
• layer 4: world
  trade center building

4. How to Create the Reference Grids

The
Reference Grids (or Base Grids)
are a set of precisely delimited reference surfaces, which allow us to build
our icons by focusing on size and consistency.

Usually, the size of the grids determines
the size of the actual icons, and they should always be the first decision you
make when you start a new project, since you’ll always want to start from the
smallest possible size and build on that.

Now, in our case, we’re going to be
creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.

Step 1

Start by locking all
but the reference grid layer, and then grab the Rectangle Tool (M) and create a 128 x 128 px orange (#F15A24) square, which will help define the
overall size of our icons.

Step 2

Add a smaller 120 x 120 px one (#FFFFFF) which will
act as our active drawing area, thus giving us an all-around 4 px padding.

Step 3

Group the two squares composing the
reference grid using the Control-G keyboard
shortcut, and then create three copies at a distance of 40 px from one another, making sure to align them to the center of
the Artboard.

Once you’re done,
lock the current layer and move on to the next one where we’ll start working on
our first icon.

5. How to Create the Stamp Frame

Let’s kick off the project by creating the stamp-like frame which will be
the repeating element for each of our icons. That being said, make sure you’re
on the right layer (that would be the first one) and then zoom in on the first
reference grid.

Step 1

Create the frame’s outer section using a 100 x 116 px rectangle, which we will
color using #45576B and then center align to the underlying active drawing
area.

Step 2

Adjust the shape that we’ve just created by
positioning a couple of 8 x 8 px circles
(highlighted with red) exactly 8 px
from one another both horizontally and vertically, which we will then
cut out from the larger rectangle using Pathfinder’s
Minus Front Shape Mode.

Step 3

Continue adjusting the resulting shape by
flipping its Fill with its Stroke (Shift-X), and then setting its Weight
to 4 px from within the Stroke panel.

Step 4

Create the frame’s colored fill section using a 76 x 92 px rectangle (#EFA28B), which
we will center align to the larger outline.

Step 5

Finish off the frame by adding an outline to
the colored fill section using the Stroke
method. Create a copy of it (Control-C)
which we will paste in front (Control-F)
and then adjust by changing its color to #45576B and then flipping its Fill with its Stroke (Shift-X). Set
the path’s Weight to 4 px, and then select and group all
three shapes together using the Control-G
keyboard shortcut.

Step 6

Once we’ve finished working on the frame, we can
create two copies of it (Control-C >
Control-F) and position them onto the remaining reference grids, making
sure to paste each one of them onto their respective layer (that would be the
third and the fourth). Then before you lock the layers back, change the color
of the second frame’s fill section to #8CC1ED and the third one’s to #8CEAC8.

6. How to Create the Empire State Building

With the frames in place, we can now begin working on the actual buildings,
so make sure you’re back on the right layer (that would be the second one) and
zoom in on the first reference grid so that you can have a better view of the
shapes.

Step 1

Start working on the Empire State Building’s
base by creating a 22 x 18 px rectangle
with a 4 px thick Stroke (#45576B) which we will bottom
align to the fill section’s outline, positioning it at a distance of 5 px from its left edge.

Step 2

Create another slightly taller 14 
20 px rectangle with the same 4
px thick Stroke (#45576B), which
we will position on top of the one from the previous step.

Step 3

Create the right section of the building’s base by placing a copy (Control-C > Control-F) of the two
shapes that we have onto the opposite side of the frame, keeping the same 5 px gap between them and the larger
outline.

Step 4

Start working on the building’s center section,
by creating a 38 x 10 px rectangle
with a 4 px thick Stroke (#45576B) which we will center
align to the frame, positioning it on top of the base shapes.

Step 5

Adjust the shape that we’ve just created by
opening up its path, by adding a new anchor point to the center of its bottom
edge using the Add Anchor Point Tool (+)
and then removing it by pressing Delete.

Step 6

Continue working your way up by creating a 30 x 12 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the previous shape,
positioning it on top.

Step 7

Start working on the building’s upper section by creating a 22 x 6 px rectangle
with a 4 px thick Stroke (#45576B), which, as you’ve
probably already guessed, we’ll position on top of the previous shape.

Step 8

Add another 6
x 12 px rectangle with a 4 px thick
Stroke (#45576B) on top of the shape
that we’ve just created, making sure to center align the two afterwards.

Step 9

Finish off the building’s structure, by adding
the antenna using a 14 px tall 4 px thick Stroke (#45576B), which we will of course position on top of all
the other shapes.

Step 10

Next, we’re going to take a
small detour and add in the little highlights before starting work on the
windows themselves. So, using the Rectangle
Tool (M), create a bunch of 2 px tall
white (#FFFFFF) rectangles, which will cover the upper visible section of most
of the building’s composing sections.

Step 11

Adjust the shapes that we’ve just created so that they turn up looking
like actual highlights, by selecting them all and then lowering their Opacity to just 60%.

Step 12

With the highlights in place, it’s time to start working on the windows,
which we will create by drawing them using a couple of 2 px thick vertical Stroke
lines (#45576B) positioned 4 px from
one another (if you’re using the Align
panel’s Distribute options). Take
your time, and add the lines to each section of the building, selecting and
grouping (Control-G) both them and
the larger composing shapes together as you go along.

Step 13

Add the hard shadows by creating a couple of
rectangles (#45576B) which we will position so that they overlap the path of each building’s outline.

Step 14

Adjust the shadows (all except the top center
one) by individually selecting their top inner anchor points and then pushing
them to the bottom by a distance of 1 px
for the top ones and 2 px for
the rest. You can use the Move Tool (right click > Transform > Move > Vertical > +  / -2 px depending on which side you start with).

Step 15

Finish off the icon by drawing in the sky using a couple of 2 px thick Stroke lines (#45576B). Take your time, and once you’re done, group
all the lines together using the Control-G
keyboard shortcut, doing the same for all of the icon’s composing sections
afterwards.

7. How to Create
the Chrysler Building

Assuming you’ve already
finished working on the first icon, move on up to the next layer (that would be
the third one), locking the previous one, and then zoom in on the second
reference grid so that we can get started.

Step 1

Start working on the building’s bottom section by creating a 48 x 16 px rectangle with a 4 px thick Stroke (#45576B) which we will center align to the bottom of the
colored fill section’s outline.

Step 2

Create a smaller 32 x 10 px
rectangle with a 4 px thick Stroke (#45576B) which we will position
on top of the previous shape, making sure to center align the two.

Step 3

Finish off this section by adding a 16
x 20 px rectangle with a 4 px thick
Stroke (#45576B), which we will
adjust by setting the Radius of its
top corners to 8 px from within the Transform panel’s Rectangle Properties.

Step 4

Select all three shapes, and turn them into a single larger path by
uniting them using Pathfinder’s Unite Shape Mode.

Step 5

Start working on the building’s left side section by creating a 6 x 18 px rectangle with a 4 px thick Stroke (#45576B), which we will position onto the first step of the
larger shape.

Step 6

Add a little ledge to the shape that we’ve
just created, using a 4 px wide 4 px thick Stroke line (#45576B) which we will position onto its top-left
corner. Once you’re done, select and group the two together using the Control-G keyboard shortcut.

Step 7

Create the building’s right-lower section using
a copy (Control-C > Control-F) of
the one that we’ve just finished working on, which we will vertically reflect (right click > Transform > Reflect
> Vertical) and then position onto the opposite side of the building.

Step 8

Create the building’s center section using a 32 x 28
px rectangle with a 4 px thick Stroke (#45576B) which we will position
on top of its base.

Step 9

Adjust the shape that we’ve just created by setting the Radius
of its top corners to 16 px from
within the Transform panel’s Rectangle Properties.

Step 10

Continue adjusting the resulting shape by adding a new anchor point to
the center of its bottom edge using the Add
Anchor Point Tool (+), and then removing (Delete) in order to open up its path.

Step 11

Continue working your way up by creating a 24 x 14 px rectangle with a 4
px thick Stroke (#45576B) which
we will adjust by setting the Radius
of its top corners to 12 px and then
opening up its bottom path. Once you’re done, position the resulting shape on
top of the previously created one.

Step 12

Add another 16 x 12 px rectangle
with a 4 px thick Stroke (#45576B), which we will adjust
by setting the Radius of its top
corners to 8 px, opening up its
bottom path as we did with the previous shape. Then, once you’re done, position
the resulting shape on top of the building’s center section.

Step 13

Start working on the building’s upper section by creating a smaller 8 x 6 px rectangle with a 4 px thick Stroke (#45576B), which we will adjust by setting the Radius of its top corners to 4 px, positioning the resulting shape
on top of the previous shape, making sure to open up its bottom path.

Step 14

Create the final piece of the building’s upper section using a 6 x 16 px ellipse with a 4 px thick Stroke (#45576B) which we will adjust by cutting it in half by
selecting and then removing its bottom anchor point. Center align the resulting
shape at a distance of 4 px from the
active drawing area’s top edge, making sure to extend its bottom section onto
the previous shape, using the Pen Tool
(P).

Step 15

Add the antenna using an 8 px tall
4 px thick Stroke line (#45576B), which we will center align to the previously
created shape.

Step 16

As we did with the previous building, start adding the little highlights
using white (#FFFFFF) as your main fill color, lowering their Opacity to 60% once you’re done. Create the straight highlights using regular
rectangles, while using cutouts for the arched ones, making sure to send them
to the back of the building afterwards (right
click > Arrange > Send Backward).

Step 17

Start adding details to the upper section of the building by creating a
2 x 2 px circle, which we will color
using #45576B and then position in the center of its second shape.

Step 18

Create three 2 x 4 px ellipses (#45576B) which we will position 1 px from
one another, moving the center one to the top by 1 px. Group (Control-G)
the shapes and then position them in the center of the top section’s third shape.

Step 19

Create a second set of 2 x 4 px ellipses
(#45576B), which we will distance at 2
px from one another, grouping (Control-G)
and then positioning them towards the center of the top section’s fourth shape.

Step 20

Using nine 2 x 2 px squares
(#45576B), add the little windows to the arched section of the building,
grouping them together afterwards using the Control-G keyboard shortcut.

Step 21

Create a 6 x 41 px rectangle
with a 2 px thick Stroke line (#45576B), which we will
adjust by setting the Radius of its
top corners to 3 px, center aligning
the resulting shape to the bottom of the colored fill section’s outline.

Step 22

As we did with the first building, take your time and draw in the
windows using a couple of 2 px thick
Stroke lines (#45576B) positioned 2 px from one another, selecting and
then grouping (Control-G) them
together once you’re done.

Step 23

Add the shadows using a couple of rectangles which we will position so
that they follow the path of the building’s composing sections.

Step 24

Adjust the shadows, by individually selecting
their top inner anchor points, and then pushing them to the bottom by a
distance of 2 px using the Move Tool (right click > Transform > Move > Vertical > 2 px.

Step 25

Finish off the icon by drawing in the sky using a couple of 2 px thick Stroke lines (#45576B). Take your time, and once you’re done, group
all the lines together using the Control-G
keyboard shortcut, doing the same for all of the icon’s composing sections
afterwards.

8. How to Create
the World Trade Center Building

We are now down to
our third and last icon, so assuming you’ve already moved on up to the next
layer (that would be the fourth one), zoom in onto its reference grid, and let’s
finish this.

Step 1

Create the building’s main shape using a 36 x 56 px rectangle with a 4 px thick Stroke (#45576B) which we will center align to the bottom edge of
the colored fill section’s outline.

Step 2

Start working on the building’s upper section by creating the antenna using a 36 px tall
4 px thick Stroke (#45576B), which we will position on top of the larger shape.

Step 3

Create the bottom section of the roof platform
using a 28 px wide 4 px thick Stroke (#45576B), which we will center align to the building’s main
shape, positioning it at a distance of 6
px from it.

Step 4

Add the platform’s support legs using a 16 x 6 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the larger rectangle’s
top edge.

Step 5

Create the upper section of the platform using
another 28 px wide 4 px thick Stroke (#45576B), which we will center align to the bottom section,
positioning it at a distance of 6 px from
it.

Step 6

Connect the platform’s two sections using two
sets of 6 px tall 4 px thick Stroke lines (#45576B), which we will position 4 px from one another using the Align panel’s Distribute options, placing one on each side of the antenna.

Step 7

Quickly grab the Pen Tool (P), and then draw in the diagonal support rods using a 2 px thick Stroke line (#45576B), starting from the top section of the
platform and going up onto the center section of the antenna.

Step 8

Finish off the upper section of the building by
adding an 8 px wide 4 px thick Stroke line (#45576B) which we will center align to the antenna.
Then, once you’re done, select and group all of the current section’s shapes
together using the Control-G keyboard
shortcut.

Step 9

Add the main highlights using seven 32 x 2 px rectangles (color: white; Opacity: 60%) which we will vertically stack 6 px from one another, grouping (Control-G) and then center aligning
them to the building’s main body.

Step 10

Start working on the front section of the
building by creating the windows using twelve 20 px wide 2 px thick Stroke lines (#45576B) vertically
stacked 4 px from one another.
Once you have the lines, group (Control-G)
and then center align them to the tower’s main body, at a distance of 4 px from its top edge.

Step 11

Add the front section highlights using six 20 x 2 px rectangles (color: white; Opacity: 60%) vertically stacked 6 px from
one another, which we will group (Control-G)
and then center align to the windows, positioning them underneath the first Stroke line. Then, once you’re done,
select and group both the windows and highlights together using the Control-G keyboard shortcut.

Step 12

Create the front section’s main outline using a 20 x 56 px rectangle with a 4 px thick Stroke (#45576B), which we will center align to the building’s main
body.

Step 13

Adjust the rectangle by individually selecting
its top anchor points and pushing them to the inside by a distance of 8 px using the Move tool (right click >
Transform > Move > Horizontal > + / – 8 px depending on which side
you start with).

Step 14

Create a copy (Control-C > Control-F) of the resulting shape, and then use it
to mask the front section’s windows and highlights (right click > Make Clipping Mask), making sure to send them to
the back afterwards (right click >
Arrange > Send Backward).

Step 15

Add the background windows using a couple of 2 px thick Stroke lines (#45576B), vertically stacked 4 px from one another. Start from the outer edge of the larger
outline and go all the way to the front section’s one. Then, once you’re done, select and group all of the building’s shapes together using the Control-G keyboard shortcut.

Step 16

Finish off the icon by drawing in the sky using
a couple of 2 px thick Stroke lines (#45576B). Once you’re
done, group (Control-G) all the lines
together, doing the same for all of the icon’s composing sections.

Hats Down!

Great work! Our little icon pack is completely finished!

I hope you’ve managed to follow each and every step,
and as always learned something new and useful during the process.