YKK Graphics Tutorials

A Short Note From the Owner Here

2009-03-06T07:16:29Z

As dead as this little comm may be right now due to a severe lack of creativity on the LJ icon and tutorial side of things it's not going anywhere. There's a nasty keylogger virus going around LJ lately that strips away moderator controls from people who own communities and posts links to said virus in a message in the community. It makes it appear that the community is shutting down and moving everything off LJ. This is far from the case for ykktutorial and ykkgraphics. Even though I haven't been active a lot lately I'm not shutting these communities down anytime soon. Anything that appears to have come from me saying I did shut them down is a farce. If you see something like that from my account the best non LJ way to contact me at the moment, since I really don't use my IMs much anymore, is to comment to my DA account under the name chibihalo.

How to never worry about erasing stuff outside the lines again

2008-04-20T23:04:44Z

Yes, it's a huge file (826 KB), so look out. Anyway, I wanted to elaborate on one step in a tutorial I discovered here.
This is for PS6 and PS7, however if you are using the CS series, for the CTRL G, be sure to CTRL+ALT G.

If you have any questions, feel free to ask. So, without further ado...

</a>

Ampharos "Glow" Tutorial

2007-06-12T03:18:58Z

It's time once again for some fun learning from Halo. Once again, I bring you something I stumbled upon while working on a batch of icons. This time we'll be learning how to turn this into this. This coloring gives us a nice soft yet vibrant coloring that can be used in all of the major graphics programs. The coloring works well on screen caps from animation, graphic novel art pages, or illustrations. You can use all the steps and make a complete icon or you can stop before the brushes and patterns and change things up to suit your tastes. This tutorial was made using Photoshop CS but can be achieved in any program that offers layer types.

	The first step you'll need to take in creating your icon is to prepare your icon base. Using this image of Ampharos, I followed the process I outlined in the first four steps of my Vibrant Color tutorial. However, for this icon I waited until after I resized my image to use the Gaussian Blur and set it to .3px instead of the .5 or 1px suggested and used the auto levels in Photoshop on my image and its duplicate to enhance the colors further. Doing this is an entirely optional step based on your personal preferences. With base in hand, you're now ready to color your icon.
	The base already has good coloring in it with the initial prep work alone. However, I wanted to bring out the blues and the lines on the artwork as well as tone down some of the other colors. To achieve this, I used a dark blue with strong hints of green in it. On a new layer, fill it in with #00173C. Set the layer type to Exclusion and leave the opacity alone. If the color is too muddy looking you can lower the opacity anywhere between 40% and 60%.
	The color looks good but we want to enhance the blue and bring out the green more in the subject and the background. For this, we'll need a light bright blue. On a new layer, fill it in with #95C6FC. Set the layer type to Color Burn (or Burn in PSP) and leave the opacity at 100%. Again, you can change the opacity anywhere between 40% and 60% if you want a subtle look to your icon.
	The color still could use some brightening to it while enhancing the pink on Ampharos' forehead jewel. To achieve this I used the color picker and chose the pink on Ampharos' forehead and darkened it slightly. On a new layer, fill it in with #EF7C97. Set the layer type to Overlay. The color looked a bit too cloudy so I lowered opacity for this icon to 40%. What you choose will depend on the image you're working with.
	The icon is looking good but I wanted to enhance the yellows, brighten the glow, and soften some of the overall color. For this job I used the color picker once more and chose a yellow from Ampharos' body and lightened it slightly. On a new layer, fill it in with #FFFBA3. Set the layer type to Soft Light. I wanted a subtle affect to my icon so I lowered the opacity to 45%. Again, what you choose will depend on your image.
	I liked how things look so far but I wanted to balance out the colors and darken the overall look slightly. For this job, I picked a peachy color that was a bit on the pink side. On a new layer, fill it in with #FFDDB0. Set the layer type to Multiply. It looks a bit muddy and slightly orange so I lowered the opacity to 40%. Depending on your image, you can set the opacity anywhere between 30% and 50%. Remember to play around with your settings.
	At this point, the coloring can be considered finished. However, I wanted to lighten and soften the overall color a bit. There are two ways we can achieve this on a new layer. In Photoshop, go to Edit > Fill >White. In PSP and other programs, flood fill the layer with #FFFFFF. Set the layer type to Color erasing all color from the image making it black and white. Depending on how much of the color you want to tone down, change the opacity of this layer to whatever suits your needs. For this icon, I decided 30% worked best for my image.
	There are several things you can do to finish off your icon depending upon your personal tastes. For this icon, I decided to add a subtle grunge brush in #FEFBF7. Because the darker parts of the brush covered Ampharos' face, I flipped it horizontally. I then lowered the opacity to 50% to give it a more subtle look on the icon.
	At any point, I could consider the icon finished but I wanted to add more to the icon. Inspired by other icons around Livejournal, I decided to add some subtle horizontal lines to the icon. This can be achieved two ways. In Photoshop, create a new 1x2 transparent image and zoom in as far as you can go. Then, with your pencil tool add a one pixel dot at the top of the image. Go to Edit > Define Pattern, give the pattern a name, and hit okay. To use the pattern on a new layer go to Edit > Fill > Pattern and choose your new lines. For other programs you can take this transparent PNG and paste it onto a new layer. Set the layer type to Soft Light and then lower the opacity to what looks best for your icon. For this icon, I set the opacity to 30%.
	Again, we can consider the icon finished or we can go another step further. I like taking the extra steps and add a bit of oomf to my icons. I decided a bit of text would enhance the icon further. For this icon, I chose the Cooper Black font in a green from the icon itself (#CCDBAE) and typed in the word "glow". After placing the text where I wanted it, I then decided to add a one pixel stroke in #1E1E1E. In Photoshop, this can be achieved by using the little "F" at the bottom of the layer pallet. I then decided to lower the opacity of the text to 45%. I thought the text looked a little plain so I added a gradient overlay to it. Using the same "F" on the layer pallet I chose Gradient Overlay and then clicked on the gradient to edit it. Clicking on the little boxes below the arrows I set my first color to #DBDCB3 and the second color to #A8A99A.
	At this point, you can consider your icon finished. However, I decided to give the icon one final touch and give it a nice border. On a new layer I gave the icon a two pixel stroke in #FEFBF7. Then, I chose a complimenting color from my icon and used this border brush on it. The icon is now ready to be saved and enjoyed. Remember to play around with your settings because no two images will be the same.

Other icons featuring this coloring can be found here.

Vibrant Color Tutorial

2007-04-08T22:11:13Z

You're ready to create an icon but you're not certain where to begin. You have all the brushes, text, masks, and borders to make any icon out there but coloring has to be done first. In this tutorial we'll be going step by step from preparing an image to turning it into a base and then a simple finished icon. We'll turn this into this. The coloring we'll be using can be used on just about any scan, screen cap, and photograph out there with bright colors and blue sky in the background. This works especially well on those brightly colored animation screen caps. In the end, you'll have a wonderful vibrant coloring that you can use as a part of any icon you want. This tutorial was written using Photoshop CS but can be translated to any program that includes Hard Light layer settings, Brightness/Contrast adjustments, and Hue/Saturation adjustments.

	Our first step will be to get a decent image to work with. Taking your original image, select the amount you want to appear in your icon. When working with watermarked caps and scans it is best to end the selection box either right before or above the network or website logo. Go to the Edit or Image menu in your graphics program and select Crop. Using your program's image resizing option set the image height to 120px. Now is the time to smooth your subject's skin with the blur tool in your graphics program if needed. You are now ready to prep your image.
	Next we will begin to prep the working image we created. Sharpen your image if needed. Duplicate the image and set it to Hard Light at a 100% opacity. We want the image soft but not too soft so we go to the Guassian Blur filter and set the radius to either 0.5 or 1px. For this icon the radius was set to 1px .
	Our image looks good but the color could use a bit of a boost. To do this we'll create two adjustment layers (Photoshop). The first adjustment to the color will come from a Brightness/Contrast layer. Set your contrast to +9. It's not much but it will make a difference in the end. The second adjustment to the color will come from a Hue/Saturation layer. Set your Saturation to +16 and your Lightness to +10. Always preview your image before hitting okay. If the color looks washed out after setting the lightness change your number until it looks lighter and brighter. For most images +5 works well.
	It's time to create your icon base. Use CTRL + A to select your image and copy a merged image by merging the layers or selecting Copy Merge in the Edit menu (Photoshop). Paste your image onto a new 100x100 canvas and move it around until your subject is where you like it. Merge the image with the canvas to create your base. This is the base that was used for this icon.
	Here is where we will begin to create our final icon color. We want to soften the colors slightly. Create a new layer and fill it with #00041D . Set the layer type to Exclusion and leave the opacity at 100%. It's not much of a visible difference but the colors are softer than they were.
	The colors look good but we want to lighten them slightly. On a new layer you want to fill it with #011172 . Set the layer type to Soft Light and keep the opacity at 100%. If the icon looks a bit dark you can always reduce the opacity until it looks satisfactory. The goal is to get the color where you want it to be. Remember no two images will act the same.
	Our color looks good but sometimes the subject's skin, the clouds in the sky, and images in the background could stand to be a bit more skin-like or darker. To achive this we're going to fill a new layer with #FDF2C4. Set the layer type to Multiply. The layer looks muddy so we'll fix that by setting the opacity anywhere between 30% to 45%. For this icon the opacity was set to 35%.
	The coloring looks good but it lacks that soft vibrant pop we want to achieve. To do this duplicate your base and bring it to the top of your icon layers.To achieve the softness in our coloring select the Guassian Blur filter and set it to a pixel radius of 1.5. Set the layer type to Soft Light and leave the opacity at 100%. Our coloring is now complete and the icon is ready for further manipulation, brushes, and text. I chose to add a few final details to the icon.
	I wanted to add a little text to the icon in a simple script font. For this icon I chose Learning Curve from Dafont.com. The font color is set to #1E1E1E while the size is set at 30pt due to the small size of the font. I then typed in "laugh" and moved it around my negative space until it was in a good position.
	With the text in a good position I decided to dress it up with a tiny text brush. I opened a new layer under my text layer and began playing around with my tiny text brushes. Not happy with the results I had been getting I decided to modify a small tiny text font to fit the text. I took a brush from sanami276 on DA and placed it twice under the text on both sides of the "G" in laugh. Then I erased the bottom half to creat a broken line under my text.
	Happy with my results, I merged all my layers and hit CTRL + A to select the icon. I then created a 1px border in the same #1E1E1E color as the text and brush. In Photoshop this can be achieved by hitting Stroke in the Edit menu. The pixels are set to one and the position is set at center. In Paint Shop Pro the same effect can be achieved by drawing a one pixel wide box around the icon or using 99x99 selection box and expanding it 1 pixel in the same color. Happy with how it looks I call it a finished icon and save it for future use or icon batches. Remember, what you do after you color your icon is entirely up to you. This coloring is a starting point for your wonderful icon results.

Credits:

Original Cap: Avatar: The Last Airbender Book 2 Chapter 5 at avatarspirit.net
Tiny Text Brush: ohfreckle of ownthesunshine

Other Icons Using This Coloring:

Soft and Dreamy Icon Tutorial

2007-01-28T11:37:58Z

Today we're going to learn how to create an icon that has a soft dreamy look to it. This coloring is simple to achieve and requires only five or six layers to make depending upon brushes and borders. The coloring on this icon simulates the "vaseline on the lens" look. This technique is great for stock and live action icons and should work on icons from animated sources. This tutorial was made using Photoshop CS and is translatable to any program that has the Channel Mixer and Auto Levels adjustment options.

	First, take your source image and crop it to your liking resizing it to 100x100px. Do not sharpen your image. This will be your base image. For this icon I wanted the entire bleeding heart flower to be in the picture.
	Second, duplicate your base image. For now we'll leave the settings alone.
	Here's where the magic happens. Create a new Chnnel Mixer adjustment layer and click the monochrome box. This will allow us to create a black and white image with a good balance between the shades of black, white, and gray. Leave the reds at 100% and set the blues to -66%. Slide your greens to the positive numbers until you get a black and white image to your liking. Do not go over 100% unless your base image has a lot of green in it. For this icon, I set my greens to 60%. Remember, what works for one image won't work for others so play around with the greens. Once you have your image to your liking, merge the adjustment layer with the copy of your base.
	Duplicate the now black and white copy of your base. This copy will be where you make your icon soft and dreamy. Go to the Filters menu and select Gaussian Blur in the blur filters. Set the radius of the blur to 2.5. Leave the layer type to Normal or the icon won't have the soft dreamy look you want.
	This is where the rest of the magic happens. We want to let the color of the base to show through. On your blurred layer set the opacity anywhere between 30 and 50 percent. This will give your icon the soft look to it. For this icon I set the opacity to 45%. To get the color to show through you need to change the settings on your first duplicated layer. Set the layer type to Soft Light. The icon looks soft but it's not dreamy looking so we'll need to lower the opacity of our now Soft Light layer. Set the opacity anywhere between 30 and 50 percent. For this icon I set the opacity to 35%.
	The icon looks good but I felt it could use a bit more to the coloring. Go back to your base and create a new layer between the base and your first duplicated layer. Here we'll create an Exclusion layer to soften the reds, emphasize the greens, and help the shadows stand out in the base image. Fill the layer with a dark green color (#0D2101). A swatch of the color for fast copy and pasting can be found here. Set the layer type to Exclusion and change the opacity depending on the look you want to achieve. For this icon I left the opacity alone.
	Looking at the icon I thought it appeared a little flat. I wanted the shadows and highlights to stand out so I decided to use the Auto Levels in the adjustment section of the image menu. Go to your two duplicated layers and use Auto Levels on each of them. Since I liked the look I got I left the base image alone.
	Satisfied that the color looks the way I liked it to, I can now go one of two ways with the icon. At this point, I can call the icon finished and add my borders. However, since I had enough free space on the right side of the icon I decided to add a tiny text brush that I found on DeviantArt. On a new layer on top of your coloring add the brush twice in a dark gray color (#1E1E1E) to make it stand out against the background. Even though it looks good against the background, I decided to lower the opacity down to 85% to keep with the soft theme of the icon.
	Once again you have two choices for the icon. You can leave your icon the way it is and consider it finished, or you can add borders to your icon. I decided my icon would look better with some borders. What you add here is totally up to you and the program you use. Create a new layer and click Ctrl + A to select your entire icon. Using a white shade go to the Edit menu and click on stroke (for Photoshop users). Set the width of your stroke to 2px. Switch to your dark gray color and click on stroke again setting the width to 1px. Your icon is now finished. If you chose to create your icon without text brushes, it will look like this when finished.

Other Icons Made With This Technique:

Fur making

2006-05-10T05:10:30Z

::Making fur::
By: Rini

This is for photoshop 7 and may or may not be applicable to other programs.

Make the following canvas: transparent, 300 by 300 pixels and then choose the following colors and the grass brush.

Then color the entire thing with the brush, don't worry if there's other unwanted colors in there like green. Like so:

Then make the following changes exactly:

Then if you wish to have the exact same color, type the following boxes. If not, click on the color box and pick out colors to your desire. If unsure as to why it is not registering, Click on the custom button below cancel and you'll be able to pick out the colors.

Make a selection, for now, a circle.

Then click on the smudge tool and pick a brush size, I chose size 10--you can have the edges semi-soft.

Then go up at the top where it says Strength: and change the number to 75% or weaker if you desire:

Then start smudging with the following numbers in order. Please start at the bottom and work your way up so that it looks like fur and not knotted or matted. Though you can work at the top if that's how you want it to be.

Then do a second row of smudging:

Once you get the handle of smudging, do the rest, remember, fur is free flowing and has directions so don't keep it in one way!

And that's how I make fur and so can you! Expirement with this. I made a piece using fur technique like the cat below:

the finished piece of that one is here: http://www.mediaminer.org/fanart/view.php/188003

And that's all folks! :) Good luck on your venture!

Making Brushes

2006-05-10T03:29:27Z

The following link is a tutorial on how to make brushes in photoshop 7, which should also be compatiable with all other photoshop platforms. Paint shop pro can be applied as well.

::Making brushes::
By: Rini

First, please make a new canvas with the following demensions:

And the brush tool to outline a brush you wish to make:

Make your object, I am doing flower petals like so:

If you want to make variance to the brush, like the stem within the petals, then you'll want to make a new layer:

Then fill the object with solid black and then go to the Fill: in the layers and drag it to where it'll fade:

Once you get it to where you wish to have it fade, go to Edit menu then down to where it says "Define Brush...":

The following window will pop up, name the brush so you can get it later and for easier search:

You now just made a new brush! To use it, go make a new canvas or the piece you are working on, go to the following window and play around with the presets that you wish to have and watch the circled area to see how it will turn out:

Then I made this one quickly to show you how it can be used in:

So there you have it, making a brush!

Note: The more brushes you make, the slower it gets when you open photoshop when it first loads so don't make a thousand new brushes unless you got a fast computer!

So good luck on your venture! :)

Pen Tool

2006-02-04T10:46:34Z

Using Pen Tool

I know many of us have had a hard time trying to use pen tool and fail. It took me a computer graphics class in high school to learn it. A fair amount of knowledge grasp in Adobe Photoshop or Illustrator is needed to learn this tool. I have realized that I’ve used the pen tool for two years now and I think it’s time to pass on my knowledge to all of you. :)

Pen tool helps you to create pictures with clean, crisp lines, for example, I used Icis’ drawing and with a pen tool, I cleaned up the lines, http://www.mediaminer.org/fanart/view.php/184768 [Mandy] Then, eventually, you will be able to draw with just pen tool to create images. This image was done with only pen tool with no previous sketches made, http://www.mediaminer.org/fanart/view.php/182822 [~Juggy~].

So, ready to learn how to use the pen tool?

First, you will need to use a drawing or a picture to start out with. I’ll use this picture:

Make sure that you have three of the following layers because pen tool will not work on a single layer. You will need the drawing/picture, a layer filled with white, and a transparent, empty layer, which is where you will be inking your lines.

The white background layer is so that you will be able to tell what you’re doing. Now, click on the white background layer’s eye so that the layer will be invisible and see the drawing/picture again.

The top circled area is where you click on to make the white background invisible and the bottom circled area is where you click on to make a new pen layer, as I will call it.

After you click on the pen tool in the bottom circled area, you will need to make sure you have the top circled area with the arrow pointing to it, clicked on, with the pen inside the square instead of the square-blank one.

To start using the pen tool, just click on the ideal beginning of the line as indicated by the arrow. I’ve started at the point where her jaw starts.

The first part, you will make a second point just after something curves but before something becomes straight or curves another area. But before you let go of the point, drag to where the arrow is pointing. To know which way to drag, I do it by watching which way the curve is going. Often times, it will not curve to the way you want. Do not worry about that right now. I’ll show you how to fix the curves later. See the below picture, it did not turn out the way I want it, even if I try to keep it to the lines.

To fix that, you can put the white background visible or on fade (opacity 62% [random number for me]) to a point where you can see well enough of both the pen tool lines and the drawing itself.

Now, to fix the lines, hold down the pen tool to bring up the submenu as shown above.

First, click on any part of the line segment you wish to edit and you will see the points appear. Then take one of the points you want to edit and move it up/down/left/right/etc to move the line to where you want the line to be at. Once you’ve done that and you want to edit another point, click on the line segment you want to edit and repeat the steps.

Chances are, you will want to move an anchor, the points which are within the pen tool lines, elsewhere. To do that, just grab the tool in the tool menu. If it’s totally in black, hold it down to bring up the submenu and click on that. Then click on the anchor and drag it to your liking.

Once you have edited the lines to your liking, we will get to the next step, getting the black, crisp lines. Keep in mind, this may differ in different versions of Adobe Photoshop but should be roughly the same.

First, click on the brush button, make sure the brush size is the size of the line you want and is black. (or any other color of lines you want). Also, make sure you have clicked on the lines layer. Then you have two ways about stroking the lines. Either click on the red-squared area one which strokes right away. Or if you want to do something niftier, then right click on the path layer you want to stroke.

To do that, such as lines where things begin with thin lines and really thick, the size of your brush and gets thinner again, like the line above.

To achieve the thin to thick to thin lines, the box is needed to be checked in stimulate pressure.

When you are done stroking the line to your liking, you just click on the new Pen tool layer to do a different line.

Then you just have to repeat the steps for all the other lines in the drawing

Additional things:

To be truly efficient, you will need to have a lot of patience when learning to use the tool and especially experiment with all of the buttons in the pen tool menus.

Black arrow: it is handy to know, if you want to move, say, an eye. You grab the black arrow and drag the line to the other side and stroke the line. After that, you take lasso tool and surround the area, then go to edit, Transform>Horizontal or however you want to flip in which direction. Free transform, if you’re feeling more devious. Or you can take the easier way: surround the area already stroked with lasso tool, copy and paste, move it with the move-arrow to a different spot and flip it with the Edit>transform>horizontal.

There are other things in the pen tool menu as you have noticed. All you have to do is play around with them. And that’s that. =D

Finished result (line):

After you do the line art, keep the line layer at the top when you color. You don’t have to worry going over the lines if you use lasso tool to stay within the lines. Like below, look at where the line layer is and the color layers.

After that, you can go crazy with shading/highlighting. :)

Finished result:

Any questions, you can ask in here and I will answer. :)

Photoshop: Brushless Abstract Forum Signatures

2006-02-01T05:55:38Z

Ever wonder how people create innovative signatures to use on forums? There are tons of tutorials out there that attempt to show you how to create these effects using Photoshop. However, most, if not all, of them are for the same style and require you to download and install brushes. Using some of the techniques learned in these tutorials, I have created a way to make forum signatures that require no brushes. By using a few simple techniques already found in Photoshop, we will create a stylish forum signature that you can use on forums and on your user info page right here on Livejournal. In no time, you'll be on your way to making better forum signatures.

Today we'll be learning how to create this forum signature.

1. Create a new image with the following settings.
Size: 400x160
Background: White

2. Find a suitable render to use for your signature image. For our tutorial I chose an image of Babus from Final Fantasy Tactics Advanced. I chose this image because of the good bright colors.

3. Remove the background from the render using the Magic Eraser

4. Resize the render. Click on Image > Image Size using the following settings.
Height: 200
Resample: Bicubic Smoother

5. Copy our render. Hit CTRL + A to select it and CTRL + C to copy it.

6. Place the render onto our background with CTRL + V.

7. Duplicate layer 1 twice by going to Layers> Duplicate Layer. We'll be working with the duplicates so click on the eye next to Layer 1 to make it invisible.

8. Use the Motion Blur filter on Layer 1 Copy. Go to Filter > Blur > Motion Blur. Enter in the following information:

Our blur will look like this:

9. Repeat the same step for Layer 1 Copy 2. Change the angle from 45 degrees to -45 degrees. Our results end up like this:

10. Move the second blur to create a crisscross effect. Copy the blur layers until the background is covered. Our results will end up like this:

11. Create a new layer under our blurs. Reset your colors by hitting Shift + D. Create the cloud effect. Go to Filter > Render > Clouds. We end up with this:

12. Make Layer 1 visible and move it above all other layers.

13. Duplicate Layer 1 and move it below the original render. Click on Filter > Blur > Gaussian Blur. Use the following settings.
Blur Radius: 5.0
Layer Blending: Color Burn

14. Copy all of our layers. Hit CTRL + A to select all of our layers. Then, we go to Edit > Copy Merged to copy all of our layers. Hit CTRL + V to paste the copy of our signature on top of the layers. Set the blending to Soft Light.

15. Create a new layer below your renders. Fill the layer with a custom pattern. (If you don't know how to make the pattern you can use this tutorial to learn how)

16. First, we click on Edit > Fill.

Then we chose the diagonal pattern we created from the fill pattern pop up box set to 30% opacity.

Use the following settings on your layer.
Blending: Soft Light
Opacity: 70%

17. We're going to give our signature one final touch before adding our text. On top of all our layers, we create a new layer. Click on the selection tool. Make the style Fixed and set it to 30x160 pixels. Place the selection box in the upper left corner of the signature. With the dropper tool, pick a light color from the background.

Here's the color I chose:

Fill the selection box with our chosen color. Set the layer opacity to 45%.

18. Keep the area selected and fill it with the diagonal pattern. Switch the foreground color to black. Click on Edit > Stroke. and set it to outside with 100% opacity. Hit CTRL + D to deselect our layer. Again we can stop here if we'd like but we're going to add some text.

19. Now we'll add the text to our signature. Set your foreground color to white and then select the text tool. Add text to the signature. For this signature we used the following settings.

Font: Geo Sans Light (You can use whatever works well for you).
Text: Magic Bunny
Text Size: 30

The white looks nice but we'll make it stand out with an outer glow. We click Layer > Layer Style > Outer Glow and set the color to white.

20. Change the text tool to verticle text. For this signature we want to give it a touch of Japanese characters to dress it up. We used the following settings to achieve this.
Font: Japanse
Text: Babus
Text Size: 30

Here is a look at our layers before we finish off our signature:

21. To finish off our signature we first merge our layers. Click on Layers > Merge Visible Layers. Select the merged image. Add a stroke to the image using the following settings:

There we have it our signature is ready to be saved. We click File > Save As and save it as a .jpg image and a maximum file size. Now we have a signature we can use for forums or our user info page. Enjoy the new signature!

Photoshop: Diagonal Line Pattern

2006-01-31T22:15:24Z

Ever wondered how icon, layout, and banner makers get diagonal lines onto their finished images? Some graphics programs give you premade lines to work with. However, in Photoshop the user does not have premade lines to choose from. You, the user, must make these lines yourself. It's a simple little process that will add a nice touch to your icons, banners, and layouts when completed. In this tutorial you will learn how to make the popular 3x3 diagonal lines. These lines will be used in future tutorials so making them now will save you the step of making them during the tutorial. So without further ado let's begin making your first custom pattern for Photoshop the diagonal line.

1. Our first step will be to create a new image in Photoshop. We want our image to be 3 pixels wide by 3 pixels high and set it to transparent. (Settings you will use)

2. Now that you have your new image created it's time to create the pattern you will use. As you can see that image is quite small. To help us better create that pattern we're going to zoom in on our image until it's at 1600%. (Image at 1600%)

3. With the image at 1600% we can now create our line to do this we will go over to our tools and select the pencil tool. The pencil tool is located along with the paintbrush tool. Click on the little triangle in the bottom corner of the paintbrush tool and then select the pencil tool. (Pencil Tool)

4. We want to create a black line to use in our pattern. The easiest way to get a black color is to hit Shift + D to reset our foreground and background colors to black and white.

5. Now that we have our pencil tool selected change the size of the pencil point to one pixel. With the pencil at one pixel in size go to the upper right corner of your image and place a one pixel dot on your image. With the image zoomed in at 1600% you can see a square shaped pencil point that will fit perfectly in your image. (One pixel point)

6. Place another pixel point going towards the bottom left corner of your image and repeat this process until you have a diagonal line of three one pixel pencil points.

7. Now that you have your diagonal line created you'll need to make it a custom pattern. To do this go edit> define pattern. (Define Pattern)

8. A pop-up box will then appear where you will name your pattern for ease of remembering our pattern we'll give it the name of "Diagonal 3x3". (Patten Name)

9. Use and enjoy your first custom pattern!

Now you have a 3x3 diagonal line pattern to use in your graphics. If you want your lines to go in the oposite direction repeat the process except we start in the upper left corner when we reach step 5. If you'd like white lines instead of black set your foreground color to white. This same process can be used to create lines that are further apart in space. Just remember to keep your image a transparent square. The size of your square will tell you how many one pixel dots your line will be. A 5x5 square will be five pixels long.

Looking For Affiliates

2006-01-31T01:56:59Z

YKK Graphic Tutorials is looking for affiliates. If you have a graphics community, a graphics journal, or a graphics help community or journal then why not become an affiliate. To become an affiliate of ykktutorial then reply to this post and you'll be added to our list of affliates. Since YKK Graphics Tutorials does not allow open advertising of communities and journals being an affiliate is the best way to share what you do with other members of this community.

Looking For Contributers

2006-01-29T04:54:54Z

YKK Graphics Tutorials is looking for people to contribute their graphics knowledge to the community. If you have tutorials and would like to share them with a wider audience then why not apply for posting access to the community today. To become a contributer to YKK Graphics Tutorials comment to this post and you'll be added to the list of people who have been given posting access to the community.

Welcome!

2006-01-29T04:38:02Z

Welcome to the Yokohama Kaidashi Kikou Tutorials. Here you'll be able to find tutorials on how to create graphics you can use for journals, websites, and forums. These tutorials will show you how to use Photoshop CS, Paint Shop Pro 8, and Animation Shop 3 to create your graphics. The tutorials will be easy to understand and follow. The goal of each tutorial will be to show you the user how to better use Photoshop, Paint Shop Pro, and Animation Shop. Most importantly, the overall goal of these tutorials will be to have fun making graphics. So welcome and enjoy!

-Chibi Halo