[Tutorial] Basic Icon Creation

2011-06-17T17:17:06Z

This is a tried and true method of creating icons that look decent. Now, it does NOT work for every picture and generally, you'll have the best results with screencaps or other dull looking pictures. I was asked how to create icons beyond cropping, so this is my short tutorial that leads you through the basic actions I take on the icons that I make.

I'll be going from this: to this:

For this tutorial I'll be using a screencap of Misha Collins from Supernatural taken from here. (Awesome site is awesome!)

Here is the particular cap I'm using.

1. Crop your image to 100px x 100px. (There are some great tutorials about cropping on Livejournal. I'll link to them when I'm not at work and can see LJ.)

Result:

Ew, right?

2. Go to Image → Adjustments → Levels... → Auto.

Result:

Slightly less ew.

3. Duplicate the base twice. Set the top layer to Soft Light and the middle layer to Screen.

Result:

That looks better!

Now, here is where you have to use your own judgement. If the image is too light? Lower the Opacity of your Screen layer. If the image is too dark? Duplicate the Screen layer and/or lower the Opacity of the Soft Light layer.

Personally, I like my icons bright and I like the contrast of the icon as it is now, so I'm not going to fiddle with my layers. However, I do think the colors need a little punch, so onto step 4.

4. Go to Layer → New Adjustment Layer → Curves. Set the following points in the RGB curve.

Point #1: Output 82, Input 66
Point #2: Output 137, Input 102
Point #3: Output 190, Input 162

Result:

I think we're ready to sharpen!

Again, use your better judgement when it comes to curves. Play around with the points until you get something you like. You can always delete the curve layer and make another.

5. Go to Layer → Flatten Image. Go to Filter → Sharpen → Sharpen

Result:

Flattening the image is easiest way to sharpen. It's also the laziest. There are some tutorials on icon sharpening/blurring on Livejournal that I will link to when I'm not at work and able to see LJ.

I think it's a little too sharp, so one final step is to fade the sharpening.

6. Go to Edit → Fade Sharpen... → 50%.

Result:

Not bad, eh? I'm not saying it's the GREATEST looking icon, but it's definitely useable and not cringe-inducing like a basic crop job.

Other icons I have used this method on...

Questions/Feedback?
Leave a comment to this post, thanks!

[Tutorial] Installing S2 Codes and Using Public Layers

2008-01-26T23:47:30Z

The following is Tutorial for creating a public S2 layout or theme. It is followed by a tutorial for using S2 style layer and theme IDs for your journal layout.

Part 1: Creating Public S2 Layouts and Themes

Before You Begin:
-- Have the source code the layout or theme you wish to install readily available.
-- Make sure your working style system is set to S2.

1. Go the journal customization area. Screen Capture.
*Note: If this is not the window you are brought to when you select "Customize" from the side-bar, then you are not in style system S2.

2. Scroll down and follow the link to the "Developer Area".

The Advanced Customization page should have loaded.

3. Select follow the "Your Layers" link. Screen Capture.

4. On the Your Layers page: Screen Capture.
-- If you are creating a layout, select "Layout" as the Type under "Create top-level layer". Hit Create.
-- If you are creating a theme/user layer, select the "Theme" or "User" and select a layout (the layout the layer is meant for) under "Create layout-specific layer". Hit Create.

5. The layout or layer that you just created should now be available for editing. Click "Edit" next to the appropriate layer. Screen Capture.
*Note: You'll notice, on the left-hand side of the table there is a column labeled "LayerID". This is the ID number(s) that you will need for distribution once you have made the layout or theme available as public.

You will now be presented with the S2 editing console.

6. Paste your S2 layout or theme code into the right-hand side of the console. Add the following lines to the top level: Screen Capture

layerinfo is_public = 1; layerinfo source_viewable = 1;

*Note: Second line is optional. Use it only if you wish to make the source code viewable to other users.

7. Click Save&Compile. If there are no errors, return to the Advanced Customization "Your Layers" page if you need the layer ID # (which is now public).

Congratulations! You've created a public ID for a S2 layout or theme.

Part 2: Using Public IDs for S2 Styles and Themes

Before You Begin:
-- Have the S2 layout and/or theme ID(s) you wish to use readily available.

1. Go the journal customization area. Screen Capture.
*Note: If this is not the window you are brought to when you select "Customize" from the side-bar, then you are not in style system S2.

2. Scroll down and follow the link to the "Developer Area".

The Advanced Customization page should have loaded.

3. Select follow the "Your Styles" link. Screen Capture.

4. On the Your Styles page, give your new style a name and click "Create". Screen Capture.

5. On the Edit Style Page: Screen Capture.
-- To use a public LAYOUT ID, select "Other...". Input the public LAYOUT ID number into the "Layerid" field. (Note: Do not use a # before the number you input.) Click "Change".
-- If you are NOT using a public LAYOUT ID, select the specific layout that your theme or user public layer ID is for and click "Change".

6. If NOT using a theme or user layer ID #, skip this step.
-- In appropriate field (Theme or User) for your layer ID, select "Other...". Input the public THEME or USER ID number into the "Layerid" field. (Note: Do not use a # before the number you input.)

7. Click "Save Changes".

You should be brought back to the Your Styles page.

8. The Style you just created should now be listed. Click "Use" next to the style you wish. Screen Capture.

Congratulations! Check out your journal page. You've just used a public style ID.

For example: The following journal's layout was created using the Public Layout ID #1200 (Flexible Squares) and the Public Theme ID #1202 (Fresh Paint for Flexible Squares) that were created on the journal kickawesome. Screen Capture.

Feel free to hit me up with questions.

writin' down all these verbs and i don't know why

[Tutorial] Basic Icon Creation

[Tutorial] Installing S2 Codes and Using Public Layers