
Loadboy's Graphic Design Studio
Home\| Wordpress Themes\| Portfolio\| Contact\| Resources

Step 1 - Initial Setup

Start by creating a new image 300 X 800 using #a5a4a0 as the background color.

On the Materials palette, set your Foreground color to black (#000000)

Make sure that both guides and rulers are turned on.

View > Guides

View > Rulers

You should see a checkmark next to both of them indicating that they are active:

We're going to be using just one vertical guide, but I will start out by giving you all of the initial horizontal and vertical guides so as to help you create as near a mirrored image as possible to what we're creating here. Remember, learn and use the concepts, but jump right in if you want to modify it to your own likings.

Let's start with our first vertical guide.

Click the left ruler and drag a vertical guide just past the center of the canvas. Double-click or right-click the guide handle to display the Guide Properties dialog, type in 190 as the new Guide position value, and click OK. This will be the right edge of our image.

Drag a new vertical guide towards the center of the canvas and set the Guide position: to 150, and click OK. This will be the center of our image and is the primary guide that we will be using.

Drag a new vertical guide towards the left side of center guide set the Guide position: to 110, and click OK. This will be the left edge of our image.

Now for the first horizontal guide. Click the top ruler and drag the guide onto the canvas area. Set the Guide position: to 160, and click OK. This will be the top of our image. We're allowing plenty of room here for creating the hilt when the time comes.

Drag a new horizontal guide towards the bottom of the canvas and set the Guide position: to 790, and click OK. This is the bottom of our image.

With all of the initial guides in place, your canvas area should now look similar to this:

Step 2 - Creating the Pattern

Before we begin let me point out that this image is going to start out looking like a knife rather then a sword. This will let us concentrate on getting the quality we're after as we create the blade. When we're satisfied with the results, we'll stretch it out to a look like a sword.

The first part of the pattern we'll be creating it the tip.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Ellipse

Layers > New Raster Layer... > Ok

Towards the bottom of the canvas, create an elliptical shape that extends just beyond the left and right vertical guides, and rests on the bottom guide:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Selections > Select None

Let me explain what we're going to do next. As it is, the ellipse shape is to rounded on the end(s) to make a good looking sword tip. If we use the selection tool and remove the rounded sides, it'll look worse as it then gives the appearance of being rounded to quickly for a real looking tip. Here's a simple solution.

On the Tools toolbar, select the Move Tool (M)

Re-position the image (either left or right) until one of the edges of the elliptical shape line up the corresponding vertical guide:

On the Tool Options palette, Selection type: Rectangle

Following the center vertical guide, create a rectangular selection through the center of our image:

Now hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

Layers > Duplicate

Image > Mirror [Keyboard shortcut: Ctrl + M]

Layers > Merge > Merge Down

Your image should now look similar to this:

This gives us a much more defined tip.

You can confirm that the image is lined up perfectly with the left, right, and bottom guides by selecting the Pick Tool(P) and confirming that the now outlined image is in place:

Using the Pick Tool(P) outline, drag a new horizontal guide onto the center nodes of the image:

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle (it should already be set.)

Starting at the top vertical guide, create a rectangular selection that extends down to the new guide that we just created (the center of our ellipse):

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Selections > Select None

Layers > Merge > Merge Down

Your image should now look similar to this:

Once you have a basic shape, now you can start adding our removing portions of it to form the final pattern. For this tutorial we will be removing portions. There are no rules here, just creativity.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Circle

Following downwards on the left vertical guide, create a small circular selection (if you want to set another horizontal guide, the center of my selection is at position 288):

Hit the Delete key on your keyboard:

Now we'll remove a matching portion from the other side.

Selections > Edit Selection

Your selection is now a salmon pink color:

Image > Mirror

Take the selection out of edit mode.

Selections > Edit Selection

Hit the Delete key on your keyboard

Selections > Select None

Now we'll shape the tang.

On the Tool Options palette, Selection type: Ellipse

Using the top horizontal guide as my main reference point, I created a fairly large elliptical selection just to left side of the vertical guide like so:

If you zoom in real close to your image, you want to make sure your just above the piece we cut out:

Hit the Delete key on your keyboard:

Now for the other side.

Selections > Edit Selection

Image > Mirror

Take the selection out of edit mode.

Selections > Edit Selection

Hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

This looks like a good pattern to start with so let's create a selection and save it to the Alpha channel.

Selections > Select All[Keyboard shortcut: CTRL + A]

Selections > Float[Keyboard shortcut: CTRL + F]

Selections > Defloat[Keyboard shortcut: CTRL + Shift + F]

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Layers > Delete

Don't de-select yet!

Step 3 - Creating the Blade

For the rest of this tutorial, I've removed all of the other guides by dragging them off of the canvas area except the center vertical guide at position 150. It's time for a lot of selection and gradient work. Let's begin.

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #6d6d6d and your Background color to #9ba099

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Layers > New Raster Layer... > Ok

What we're going to do now is remove half of the selection.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Hold down the Ctrl key on your keyboard.

Starting just above the top of our image and following the center vertical guide, remove half of the selection:

Selections > Modify > Contract...> Number of pixels: 1 > OK

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

I want to show you another way of quickly changing colors. Since we're going to be using the same gradient pattern and settings, and all we want to do is change the colors, the fastest method is to click on the appropriate foreground or background icon on the Swap Colors to bring up the Color dialog.

We're not swapping colors here, so don't click on the tiny bi-directional arrow on the bottom. If you do, just click on it again. Remember that the dark color goes on top :))

Set your Foreground color to #77787c and your Background color to #a9aeb1

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Let's move the selection to the other side of the image, save it to the alpha channel, and change colors.

Layers > New Raster Layer... > Ok

Selections > Edit Selection

Image > Mirror

Take the selection out of edit mode.

Selections > Edit Selection

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Using the Swap Colors on the Materials palette, set your Foreground color to #c5c2d5 and your Background color to #9da1ac

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Selections > Select None

Your image should now look similar to this:

Step 4 - Creating the Flats

Time to create another pattern. This one will be easy.

Layers > New Raster Layer... > Ok

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #2 > Load.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Hold down the Ctrl key on your keyboard. What we want to do here is remove the upper portion of our selection just above the shoulder:

So that it now looks similar to this:

On the Materials palette, set your Foreground color to red (#ff0000)

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Selections > Select None

Your image should now look similar to this:

What we're going to do now is give our pattern a round top. You'll probably need to really zoom in on the image for more precision.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rounded Rectangle

Start from the edge and create your selection over to the center vertical guide:

Continue following the vertical guide until your selection is now past the tip of the image:

We don't want the tip rounded, so be sure the rounded portion of the selection itself extends beyond the image:

Now we're going to angle the top of the selection slightly.

Selections > Edit Selection

You can't see the salmon color because our pattern is also red. I did this on purpose so as to help you try to create this visually.

On the Tools toolbar, select the Pick Tool(P)

Hold down the Shift key on your keyboard.

Grab the top right corner node and bring it down slightly. Try to visually picture how it will look:

Once your satisfied with the angle, take the selection out of edit mode.

Selections > Edit Selection

Now we cut the pattern.

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

Let's create a selection of our new pattern, contract it by one pixel, and save it to the Alpha Channel.

Selections > Select All[Keyboard shortcut: CTRL + A]

Selections > Float[Keyboard shortcut: CTRL + F]

Selections > Defloat[Keyboard shortcut: CTRL + Shift + F]

Selections > Modify > Contract...> Number of pixels: 1 > OK

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Don't de-select yet!

Layers > Delete

Layers > New Raster Layer... > Ok

On the Materials palette, click on the Foreground color and select the Gradient tab.

Click on the image to open the available gradients.

Select Fading white and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Now we're going to move the selection downwards and add a small indentation grove.

Layers > New Raster Layer... > Ok

Selections > Edit Selection

To make sure it goes smoothly, let's switch to another tool.

On the Tools toolbar, select the Move Tool (M)

Using the arrow keys on your keyboard move the selection down one pixel.

Take the selection out of edit mode.

Selections > Edit Selection

On the Materials palette, set your Foreground color to black (#000000)

On the Materials palette, click on the Foreground color again and select the Gradient tab.

Click on the image to open the available gradients.

Select Fading foreground and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Now we're going to move the selection downwards and clean it up.

Selections > Edit Selection

Using the arrow keys on your keyboard move the selection down four pixels:

Take the selection out of edit mode.

Selections > Edit Selection

To give it more of a shadow look we'll feather it slightly.

Selections > Modify > Feather... > Number of pixels: 5 > OK

Hit the Delete key on your keyboard:

Now we'll reload the selection and blur it.

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #4 > Load.

Adjust > Blur > Gaussian Blur > Radius: 2 > OK

Selections > Select None

Your image should now look similar to this:

The darker the image, the deeper the indentation looks. You can control the look of the depth simply by lowering the layers opacity.

On the Layers palette, lower the opacity down to about 85:

Let's put this flat into a group.

On the Layers palette, highlight the Raster 4 layer:

Layer > New Layer Group... > Name: lft edge > OK

Now, drag the Raster 5 layer into the group. It should now look similar to this:

Highlight the lft edge group layer.

Layers > Duplicate

Image > Mirror

Okay, let's rename this duplicate group. Double-click (or right-click > rename) the Copy of lft edge group layer and name it rght edge.

We don't want both sides of our image to look the same.

Highlight the Raster 4 layer of the rght edge group.

Set the Blend Mode to Difference and lower the layers opacity down to around 30:

Your image should now look similar to this:

Step 5 - Creating the Fuller

Layers > New Raster Layer... > Ok

Layers > Arrange > Bring to Top

On the Materials palette, set your Foreground color to #9da1ac and your Background color to #77787c

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Pen Tool(V)

On the Tools toolbar, use the following settings (Line style: Round):

Starting well above the shoulder and following the center vertical guide, create a rounded line downwards towards the tip, but don't go all the way down (ending at horizontal Guide position: 680):

Layers > Convert to Raster Layer

We've got plenty of extra along the top:

We're going to trim this so that it gives the appearance of being recessed into the blade rather then setting on top of it. Normally I would just do this manually, but we'll use another method to help keep everything looking uniform.

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #4 > Load

Selections > Modify > Expand... > Number of pixels: 1 > OK

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Now we add it to the other side.

Layers > Duplicate

Image > Mirror

Layers > Merge > Merge Down

All that's needed to make it look right is to move it downwards a few pixels.

On the Tools toolbar, select the Move Tool (M)

Using the arrow keys on your keyboard move the image down until it just fits above the dark indentation:

Now we'll apply a small white highlight to make the right edge of the fuller look more metallic and pop out.

Effects > 3D Effects > Drop Shadow... > and use the following settings:

Your image should now look similar to this:

Step 6 - Applying Optional Effects

You may skip this step if you like.

The first thing we're going to do is make the edge look more razor sharp.

Layers > New Raster Layer... > Ok

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #1 > Load

Selections > Modify > Contract...> Number of pixels: 1 > OK

On the Materials palette, set your Foreground color to white (#ffffff)

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Modify > Select Selection Borders...> and use the following settings:

Your image should now have two selections around it:

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Now, we'll trim off the excess above the shoulder.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Create a rectangular selection across the shoulder to remove the upper portion:

Hit the Delete key on your keyboard

Selections > Modify > Feather... > Number of pixels: 25 > OK

Now, keep hitting the Delete key on your keyboard until the until the edge blends in with the indentation.

Selections > Select None

Next, let's add a dark edge along the left side of the fuller.

Layers > New Raster Layer... > Ok

Create a small rounded selection the full length of the fuller:

On the Materials palette, set your Foreground color to black (#000000)

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Adjust > Blur > Gaussian Blur > Radius: 3 > OK

On the Layers palette, lower the Raster 9 layers opacity down around 75:

Your image should now look similar to this:

Step 7 - Cleanup

Before we begin this step, let's put everything we've created so far into a single group.

On the Layers palette, highlight the Raster 1 layer:

Layer > New Layer Group... > Name: blade > OK

Now, very carefully drag all of the other layers and groups into this one group. Remember to keep them in the exact same order. When your finished it should look similar to this:

Make sure that the blade layer is highlighted.

Layers > Duplicate

Layers > Merge > Merge Group

On the Layers palette, turn off the visibility for the original blade layer:

Step 8 - Creating the Guard

If you've made it this far your in the home stretch! From here out it's pretty much just the basics. The first thing we're going to do is create a pattern for the guard. No fancy tricks here just a simple copy, cut and paste. Let's begin.

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Create a rectangular selection above the shoulder extending slightly above the image:

Edit > Copy

Selections > Select None

Edit > Paste As New Layer

Okay, so we get everything going in the right direction let's flip it.

Image > Flip

Now we'll rotate on it's side.

On the Tools toolbar, select the Pick Tool(P)

On the Tool Options palette, set Angle: 90

Split the image in half.

On the Tools toolbar, select the Selection Tool (S) (the Selection type should still be set to Rectangle)

Create a rectangular selection across the bottom half:

Using your mouse, click on the image inside of the selection. You should now see that the shape of the image itself is selected:

If you look over at the Layers palette, you'll notice that you now have a "Floating Selection". Highlight the Raster 10 layer just below it:

Layers > New Raster Layer... > Ok

Now we'll place the Floating Selection down on our new layer.

Selections > Select None

Now we'll set the image right side up and facing the right direction.

Image > Flip

Image > Mirror

On the Tools toolbar, select the Move Tool (M)

At this point you may be more comfortable setting a horizontal guide at position 308

It's going to be a bit hard for me to explain here so bare with me. All I'm doing is moving the two pieces inward until they just barely cover up the circular cutouts:

Once you're sure both pieces are in place, join them together and trim off the excess.

On the Layers palette, make sure that the top (Raster 11 ) layer is highlighted.

Layers > Merge > Merge Down

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #1 > Load

We want to make sure and hide any cracks when we remove the excess so we'll contract it by one pixel.

Selections > Modify > Contract...> Number of pixels: 1 > OK

Hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

This looks like a good pattern to start with so let's create a selection and save it to the Alpha channel.

Selections > Select All[Keyboard shortcut: CTRL + A]

Selections > Float[Keyboard shortcut: CTRL + F]

Selections > Defloat[Keyboard shortcut: CTRL + Shift + F]

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Layers > Delete

Don't de-select yet!

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #cecece and your Background color to #424242

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Now we'll add a top bevel look to the guard.

Layers > New Raster Layer... > Ok

On the Materials palette,click on the Foreground color and remove the checkmark from invert for the current gradient:

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Ellipse

Okay, you may need to zoom out of the image in order to make this work. We want to create an elliptical selection across the guard like so:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Trim off the excess.

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #5 > Load

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

Now we're going to work between the two circular cutouts in order to make it look more rounded in the center.

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to black (#000000)

On the Materials palette, click on the Foreground color again and select the Gradient tab.

Click on the image to open the available gradients.

Select Fading foreground and use the following settings:

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Keeping it the width of the blade, create a rectangular selection across the two circular cutouts. Be sure to stay just inside of the cutouts themselves:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Trim off the excess.

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #1 > Load

Selections > Modify > Expand... > Number of pixels: 1 > OK

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Adjust > Blur > Gaussian Blur > Radius: 3 > OK

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #1 > Load

Selections > Invert

Hit the Delete key on your keyboard

Selections > Select None

Your image should now look similar to this:

Let's put everything for the guard into a group.

On the Layers palette, highlight the Raster 10 layer

Layer > New Layer Group... > Name: guard > OK

Now, very carefully drag all of the other layers above it into this group. Remember to keep them in the exact same order. When your finished the Layers palette, should look similar to this:

Step 9 - Creating the Hilt

On the Layers palette, highlight the guard layer

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #4b5157 and your Background color to #0e0e14

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Pen Tool(V)

On the Tools toolbar, use the following settings (should still be the same. Line style: Round):

Starting well above the shoulder and following the center vertical guide, create a rounded line downwards towards the tip,

Hold down the Shift key on your keyboard to help draw a straight line, and create a rounded line across the tang:

Layers > Convert to Raster Layer

Layers > Merge > Merge Down

Let's create a selection and save it to the Alpha channel.

Selections > Select All[Keyboard shortcut: CTRL + A]

Selections > Float[Keyboard shortcut: CTRL + F]

Selections > Defloat[Keyboard shortcut: CTRL + Shift + F]

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

Now we'll add just a bit of detail to this.

Selections > Modify > Contract... > Number of pixels: 4 > OK

Selections > Modify > Feather... > Number of pixels: 5 > OK

Effects > Texture Effects > Blinds... > and use the following settings:

Your image should now look similar to this:

Right now the image looks flat. As the saying goes, the valleys are always darker then the mountain tops. If we want this to look rounded, we'll have to darken up one of the ends.

Selections > Select None

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Circle

Create a circular selection on one end of the image:

On the Materials palette, set your Foreground color to black (#000000)

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

To make it look right we'll need to blend it in.

Selections > Load/Save Selection > Load Selection From Alpha Channel...> Selection #6 > Load

Adjust > Blur > Gaussian Blur > Radius: 7 > OK

Selections > Select None

Layers > Merge > Merge Down

Now the fun part. You get to decide how long you want the hilt.

On the Tools toolbar, select the Move Tool (M)

Layers > Duplicate

Using the Move Tool (M) start stacking them up. Rather then stacking then end on end, I'm actually overlapping them slightly:

Here is what mine looks like complete (eight rings):

When you've complete yours, let's put them into their own group.

On the Layers palette, highlight the Raster 13 layer

Layer > New Layer Group... > Name: hilt > OK

Carefully drag all of the other layers above it into this group keeping them in the exact same order. When your finished the Layers palette, should look similar to this:

Step 10 - Creating the Pommel

On the Layers palette, highlight the Copy of blade layer

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Rectangle

Draw a rectangular selection across the top edge of the guard:

Edit > Copy

Selections > Select None

Edit > Paste As New Layer

Layers > Arrange > Bring to Top

On the Tools toolbar, select the Pick Tool(P)

Move the image to the top of the hilt and resize it to fit:

Now the final touch.

Layers > New Raster Layer... > Ok

On the Materials palette, set your Foreground color to #ffffff and your Background color to #000000

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, Selection type: Circle

Create a circular selection at the top of the hilt:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection

Selections > Select None

Layers > Arrange > Move Down

Step 11 - Give it a Stretch

Time to stretch it into a sword!

On the Layers palette, highlight the Copy of blade layer

Layer > New Layer Group... > Name: complete > OK

Carefully drag all of the other layers and groups above this layer into the group keeping them in the exact same order. When your finished the Layers palette, should look similar to this: