Create a origami bird logo Ep29/33 [Adobe Photoshop for Beginners]

Create a origami bird logo Ep29/33 [Adobe Photoshop for Beginners]


(lively music) – Hello and welcome to
this video tutorial. Gareth here from TastyTuts.com. Throughout the first two
sections of this course, we were working a lot with
paper origami bird shapes. In this video, you are
finally going to see exactly how I created each example. In the previous video, we learned how to decorate
the paper birds and bring them into our main book cover document. Now if we come to the
finished book cover design and zoom into the top of the artwork, we can see we have a book
publisher logo, Purple Bird Books. In this tutorial, I’m going to demonstrate how I created this polygonal
bird logo from scratch. I’ll be demonstrating the
tools and the techniques I used to make it. So if you would
like to take a closer look at this logo example, you can
find it in the PROJECT FOLDER. If you’re new to this course, you can download the
PROJECT FOLDER for free. The link is in the description. So with the PROJECT FOLDER open, open the FINAL ARTWORK folder, and open the PURPLE BIRD BOOKS LOGO. And you should have something
that looks like this. So this logo consists
entirely of shape layers. If we look in the Layers panel we can see three main folders,
BIRD, RIBBON, and BASE. If we toggle these down, we
can see all the shape layers that make up the logo. In this video, we will
be using the Shape tools to build this logo. So to begin, I’m going to come
back to the PROJECT FOLDER and navigate to the ASSETS FOLDER in the CREATE A PROJECT folder. So in the ASSETS FOLDER,
I’ll click number seven, Logo Sketch, and open in Photoshop. So this is a rough sketch
of the logo I had in mind. Here I have drawn a sketch of
how I want the logo to work. I have scanned this in and
I can use this as a guide. Now before I start to trace my sketch, I want to set my document up so it’s going to make it easier to trace. If I start to trace my sketch
now, it will be hard to see the lines as the pen is quite dark. So I need to make the
sketch appear lighter here. So I’ll simply press cmd +
Shift + N to create a new layer. I’ll call this white base. I’ll select the white
color in the foreground, I’ll then use the Paint
Bucket tool to fill the entire canvas area in white. Next, I come up to Opacity
in the Layers panel, I’ll toggle this to 50%. So now the sketch is
light or appears lighter. So I’ll make a start by tracing the bird. Now my idea here is to create
a bird shape out of polygons. I’ll be assigning a
different color to each. So I’ll set about creating
each polygon separately. So to do this, I’m going
to use the Pen Tool. So I’ll come into the menu
and select the Pen Tool, about 2/3 of the way down. Now before I start to trace my sketch, I’m going to come up to the
top left to the Control panel, and click the left option, and
set the Tool mode to Shape. So now when I draw with the Pen Tool, I’ll create a shape instead of a path. So over to the right, I’ll
set the Fill color to white, and the Stroke to a black, and change the Stroke Size to 1 point. Next to the Stroke size, I’ll
click on the Stroke Option. I’ll be sure to select the simple stroke, and down in the alignment
option, I’ll set the stroke to align on the inside. Once that is done, I’ll start
here from the left-hand side. I click to drop a point,
then click to drop another, another, and then click
back on the first point to make the complete shape. Notice, we now have a new shape
layer in the Layers panel. Easy. So I chose a white fill
and a thin black stroke as this will help us
start to build our artwork and focus on the shapes.
Later, I’ll be adding color. But for now, I just want
to focus on the trace. So currently, the shape is still active. I’ll quickly press Enter and
this will deselect the shape. This will allow me to
now click on a corner of the shape I just created,
without modifying it. So I’ll click on the
corner, click across, down, and then back across to join the shape. So right now, the lines might
not cross that accurately, but right now that’s not a problem. I’ll be coming back and
tidying up this shape later. So I’ll press Enter to deselect the shape, and draw my next shape. I’ll press Enter to deselect
that, and draw my next shape. I press enter to deselect the
shape, and draw my next shape. Once drawn, I’ll press
Enter to deselect the shape, draw the next shape, press
Enter to deselect the shape, and draw my last shape. Once drawn, I’ll press
Enter to deselect that. So now, I have all my shapes drawn. Once happy, I’ll come
into the Layers panel, select the top shape layer,
press and hold Shift, select the bottom shape
layer, and press cmd + G to group them into their own layer folder and call this POLYGON BIRD. So now I’m going to add some color. So I’ll come back into the PROJECT FOLDER, in the CREATE A PROJECT folder, I’ll open the ORIGAMI BIRD LOGO folder, and open the COLOUR_SWATCH inside. I’ll press cmd + A to select all, cmd + C to copy, then cmd + W to close the document. Back in the sketch document,
I’ll press cmd + V to paste. And I’ll place my swatch
just under the bird and make sure this is set to
the top of my layer structure. So with the Move Tool, I’ll right click on the far left shape, select the layer from
the menu, and press A. This will select the shape
and activate the Fill and Stroke options up
in the Control panel. So I’ll come up and click on Fill. Now in the menu that appears,
I’ll click on the far right on the color spectrum icon. Upon click, up will pop
the Color Picker menu. But now, I’ll move my
mouse cursor over a color on the swatch and select it. Then press OK on the Color Picker menu. So now the fill is the purple color but I still have the stroke. So I click on the Stroke
color in the Control panel and set it to transparent. Now we have a solid color polygon. So I’ll use this technique
to apply the color to the rest of the shapes. I’ll press V to activate the Move Tool, right click on the next shape,
select it from the menu, press A to select the shape, come up to the Control panel, on the Fill color, click on the spectrum, move my mouse cursor into the
swatch to select the color and press OK. Then click on the Stroke color
and set it to transparent. So I’m going to continue around the bird, selecting each shape
and setting a new color selected from the swatch below. Soon I will have something
that looks like this. So now I’m going to reflect
on the current shapes and fine tune the points. As we can see, it’s not perfect. So I’ll press V to activate the Move Tool, I’ll right click on the
shape to quickly select it from the menu. I’ll then press A to activate
the Direct Selection Tool. Now if the Path Selection
Tool, the black arrow, is activated instead of
the Direct Selection Tool, simply come into the menu, click and hold on the Path Selection Tool, and select the Direct Selection
Tool, the white arrow. So with the Direct Selection
Tool, I can click on the shape and then click on the anchor
points that make up the shape. I can click on these and drag them around to place them into a new position. So now I’ll click the anchor points that need to connect cleanly
with the adjacent shape. I’ll drag them right up close like so. So once happy, I’ll move
onto the next shape. I’ll press V to activate the Move Tool, right click on the shape,
select it from the menu, then press A to activate
the Direct Selection Tool. I’ll click the shape, and click and drag on the corner points where
they need to be closer to the adjacent shape. I’ll come to the next shape, I’ll press V to activate the Move Tool, right click on the shape,
select it from the menu, then press A to activate
the Direct Selection Tool. I’ll click the shape, click
and drag on the corner points, where they need to be closer
to the adjacent shape. So I’ll continue around
my polygonal bird shape, selecting the shapes, and
using the Direct Selection Tool to fine tune the positioning
of the anchor points for a seamless composition. Soon I’ll end up with
something that looks like this. Perfect. So that completes the polygon bird. So next, I’ll create the
ribbon section of the logo. So I’ll select the swatch
and move it out of the way, all the way down to the bottom for now. I’ll start by coming into the Shape Tool, and selecting the Rectangular Shape Tool. Just like earlier, I’ll make
sure my Fill color is set to white, and my Stroke set to black. Then, I’ll click and drag
out the shape like so. And I’ll try to get a
similar shape to my sketch. Upon release, if the shape is not perfect, I can simply press cmd + T to
activate the Free Transform, and just drag out the corners
to make the shape I want. Once happy, I’ll press Enter. So under the top part, we
can see a triangle section. With the Rectangle Tool, I’ll just drag out another square shape, and place it under the block above. I’ll press cmd + T, and
drag the point to line up as close to the sketch as possible. So now we have this box,
but we need a triangle. Well, now I’m going to
come into the Pen Tool, click and hold, and select
the Delete Anchor Point Tool. I’ll move down over the
bottom right of the box, and click on the bottom
right point to remove it. This shape will now become
the triangle I need. Perfect. So lastly, I need to create
the bottom part of the ribbon. So I’ll draw another rectangle
shape, then move it over, and again use Free Transform
to position it over the drawing as close as possible. I’ll then move the shape
down in the Layers panel, behind the two shapes
I created previously. This time, I’ll come to the
Pen Tool, click and hold, and select the Add Anchor Point Tool. And move over to the far
right line of the box, and click to add a point
about half the way down. The new point will become selected, and I’ll just press Left a
few times on the keyboard, on the arrow key, to move the point in, to create the indent. Now for some reason,
my line is now curved. I want this straight. So I’ll now select the
Direct Selection Tool, click on the handles and drag them back into the anchor point
to take away the curve to make them straight. Great. So now, I have the right
part of the ribbon. So at this point, I’ll add some color. I’ll press V to activate the Move Tool, right click on the shape,
select it from the menu, press A to select the shape. Up in the Control panel,
I’ll select the color, select the spectrum, and choose the color from the swatch below, and change the stroke
color to transparent. So I’ll do this to the next two shapes. And soon I’ll have them filled with color. So I’ll zoom in and make
sure they are nicely aligned in relation to the larger
box above with the Move Tool. Once I’m happy with the positioning, I’ll come into the Layers panel and select both the dark triangle and the bottom ribbon part together. With the Move Tool activated,
I’ll press and hold Alt, and click and drag over to the left to quickly duplicate the shape layers. Next, I’ll come up to Edit,
scroll down to Transform, and select Flip Horizontal. Then I’ll place them carefully into place, under the left side of
the larger box above. So now, I’m going to add type to the logo. So I’ll press T to activate the Type Tool. I’ll click on top of the ribbon like so. Now for you to follow
along with this part, you will need the fonts installed. By now, you should have
the fonts installed from the previous episode. But if you don’t have them installed, or you’re new to this course, you can find the instructions
in the PROJECT FOLDER. So up in the Control panel, I’ll type League into the font name, and select League Spartan. I’ll set the font size to 50 points. I’ll come over to the right, and click on the colored
square to choose a color. I’ll move my mouse cursor into
the dark color of the ribbon, and choose it with the
Eye Dropper and click OK, and begin to type. I’ll type Purple Bird in lower case with the capital P and B. I’ll select the Move Tool in
the menu and attempt to move it above the ribbon like so. On this occasion, if
the type is too large, I’ll press cmd + T to
activate Free Transform, and scale the type down, and
place on top of the ribbon. Now depending on where the Type layer is in the layer structure,
I’ll make sure it’s set to the top like so. Next, I’ll select the Type layer. With the Move Tool,
I’ll press and hold Alt, and click and drag down to quickly duplicate the type layer. I’ll press T to activate the Type Tool, I’ll click into the type, and select all and type BOOKS in caps. I’ll select all the
type, click on the square in the Control panel,
and select a white color. I’ll deselect the type,
and press and hold cmd + D, and press Enter. Now this word could be
bigger in the ribbon. So I’ll press cmd + T to
scale the word up like so. I’ll press T to click back
into the type, I’ll select all, but this time, come into
the Character panel, and click and drag on the Tracking symbol to add a little more
space between the letters. I’ll deselect the type by
pressing and holding cmd + D, and press Enter. And now we have the type and
ribbon section looking good. So I’ll come into the Layers panel, select the top Type layer, press Shift and select the bottom Shape layer that makes up the ribbon, I’ll press cmd + G, and
name this group RIBBON. So now we have the Ribbon and
the Bird section complete. If the bird is not correctly
positioned at this time, I’ll select the folder, and
move it into place like so. So next, I’m going to create
the background ellipse and the stroke effect. Now I want the inside ellipse
to be inside the solid white. Currently, it’s going
to be hard to do this as the background is white. So I’ll come down to the white
base layer we set earlier in the Layers panel. I’ll select it, I’ll double click on the gray area, just throughout of the layer lane, in the Layers panel, upon click, I’ll pop up
the Layer Styles menu. So I’ll quickly add a
Color Overlay to this, and select a very light gray color, just enough so I’ll be able
to see my white ellipse on top shortly, and click OK. So with the white base layer
selected, I’ll now come into the menu and select
the Ellipse Shape Tool. This time, I’ll make sure
the Fill is set to white, and the Stroke is set to transparent up in the Control panel. Then I’ll click and drag out
like so, to create an ellipse. Once created, I’ll press cmd +
T to activate Free Transform, and just tweak the size and positioning. Once happy, I’ll press Enter. So here we can clearly
see the white ellipse on top of the gray background. So at this point, we no longer need the
sketch layer visible. So in the Layers panel,
I’ll toggle visibility of these two off. So the last thing I want to
do is create the stroke effect around the white ellipse. So I’ll click on the
new Ellipse Shape layer, and press cmd + J to duplicate it. I’ll press A to select the shape, then up in the Control panel, I’ll set the Fill color to transparent. I’ll click on the Stroke,
click on the Spectrum, and choose a dark purple for the ribbon. In the Stroke properties,
I’ll select the dash line, down in the alignment options, I’ll set the stroke to middle. I’ll click on More Options and
set the Dash to every four, and the Gap to two, and click OK. Next, I’ll set the point size to three. Next, I’ll press cmd+ T to
activate Free Transform. Press and hold Shift and Alt, and click and drag the
top right corner out to scale up the stroke, so there’s a gap between the white ellipse and the stroke. I’ll tweak the size
accordingly and press Enter. After further tweaking
of the logo elements, we will now have the logo
complete and ready to place into the main book cover design. Lastly, I’ll toggle the
visibility of the white base layer and the color swatch,
so now the logo is set on a completely transparent background. So now I’ll press cmd + S to save, and navigate to MY PROJECT
folder in the PROJECT FOLDER, and save this as ORIGAMI
LOGO, and click OK. Once saved, I’ll close the document. Once we have saved the document,
we now need to come back to the main book cover document. And now, I’m going to
bring in the new logo into this composition, and place it at the top of the cover. So I’ll come up to File,
and click Place Embedded. If you’re using an older
version of Photoshop, this would just be Place. So I’ll navigate to MY PROJECT
folder in the PROJECT folder. I’ll choose the ORIGAMI
LOGO file, and click Place. Upon click, the creative
will appear in my document. I say Smart Object. So before I do anything else, I’ll press cmd + ; to activate the guides. With the new logo layer
selected, I’ll press cmd + T to activate the Free
Transform and scale down. I’ll drag the logo up to the top, and make sure it’s properly
aligned to the center, and the top of the logo does
not cross into the made margin. So I’ll again apply Free
Transform and toggle the size until I have something I am happy with. So now, we can see that
the type here is too close to the logo. So in the Layers panel, I’ll
select the HEADER folder and move it down. Now if the header appears to
be too close to the birds, I’ll press cmd + T, and scale down the header
composition slightly. Okay, so I am now happy with
the position of the logo and the header. But now we have a little problem. For some reason, my
clouds are being cut off around the edges and
are no longer bleeding to the edge of my document area. So why is this? Well, early in the course,
we brought in the header as a smart object, just
like we did with the logo. Now the canvas area of that smart object is cropping the clouds here. For example, I’ll come
into the Layers panel, click into the HEADER folder, and double click on the
header smart object thumbnail. Upon click, the smart object will open, and we can see the current canvas area around the composition. So this is what is cropping the creative in the main document. So a simple way to resolve this is to increase the canvas size
of this document right here. So I’ll come up to Image, Canvas Size, upon click, I’ll see
my current canvas size. I’ll just add another 50 mm
to the width and the height of the canvas size, and click OK. Upon click, we can see a
lot more around the area of the document. So I’ll press cmd + W to close the document and save. So back in the main cover
design document, we can see that now the header is no longer cropped, because the canvas size on the smart object has been increased. Nice. So I’ll press cmd + T again
on the header smart object, and just toggle the size and positioning until I have a composition I’m happy with. And then press Enter to commit. If I need to, I’ll also
toggle the size of the logo. So I’ll come into the Layers panel, select the logo smart object layer, press cmd + G to group it,
and name the folder LOGO. I’ll right click, assign a red color, and make sure it’s at the
top of my layer structure. And press cmd + S to save my document. So that’s how you can
create a logo completely onto the shapes in Adobe Photoshop. Now all that’s left to do to our cover design is add the type. In the next video, we are going
to add the finishing touches to the book cover design.
We are going to add type. See you in the next video. (lively techno music)

17 thoughts on “Create a origami bird logo Ep29/33 [Adobe Photoshop for Beginners]

  1. I use CS5 and i cant find the options under pen tools like you do. pls suggest an alternative
    btwn ur videos are awsome! i learned a lot…. thnx for sharing d knowledge

  2. I have a prob when I open the fill option to choose the color from swatch color —> It isn't selected as if it can't see the color !

  3. If you're reading this you should be proud of yourself. This series started with 1 million viewers and now its trickled down to us: the 26 thousand who didn't give up! we are the 2.5 percent!

  4. Hi gareth, thank you so much for your videos ! I'm a beginner and i'm learning a lot of new skills thanks to your courses.
    I have a question concerning the colors of the bird, is there a certain order to follow while coloring the bird with the purple swatch.
    Thanks again !

  5. 11:17 you can also take the Convert Point tool and just click once at the anchor point of this curved line. And it`ll become straight 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *