[Tutorial] Making a New Color for the DZ Layout

[Wayne]

Making a New Color for the DZ Layout

This tutorial will give you step-by-step instructions for making a
new color for DarkZtar's layout. Please read this before attempting
to make one. The two programs you'll need for this are Photoshop and WinRar.

To do a new layout color, you'll need to download all the pieces
(images) of the layout and use Photoshop to recolor it. So once
you're ready, download all the images here. This is the layout
pieces for the blue version. It important to note this because you
need to know what images you need to recolor and what images
you don't need to recolor. If an image is composed mostly of blue,
then that's probably a color-specific piece and you'll need to recolor that.

Once you downloaded it, extract it and open it up.

When you open the folder “All Images”, you'll see something like this:



The .PSD files are important and they will be useful later. For now, go into the folder "blue".
When you open the folder, you'll see something like this:



The four folders I marked with a red dot are the only folders which
contain color specific images. So only worry about those folders.

For this tutorial, we will be recoloring the image “forum_new”
which is located in the “statusicon” folder. Right click on it and
open it with Adobe Photoshop. Once you opened it, the first thing
we will do is to change the “mode” it's in. Go to “image” in the
menu bar, select “mode”, and click on “RGB Color”.



Now press “Shift + Ctrl + N” and click on “ok” to get a new layer.



Then pick a color you want to recolor the new layout with and
select the bucket tool. Fill the second layer with the desired color.



Then change the second layer type into “color”. This will recolor the first layer's image.



If the first layer has transparent parts, that would be colored as
well. Since you want the transparent part to stay transparent,
uncolor it by first merging the two layers. Then use the selection
tool and select the originally transparent parts; then press delete.

Animation:


For the best quality layout, there are a few images you should pay
special attention to. Some buttons, after you recolor them, is easy
to miss uncoloring the corners. Simply zoom in, use the pencil tool,
set it at one pixel and “color” the corners white.

Animation:


Here's an example of the differences of fixing the corners and not fixing the corners:

Fixed corners:

Not-fixed corners:

When you're at the status icons folder, you should be very careful
because it is very easy to make mistakes because the names of
the pieces are similar and the pieces themselves look similar as
well. Here, in order to not color the arrows and the lock along with
the original icon (and also to save time), the .PSD files for these
pieces are provided. In the .PSD files, each arrows and the lock
image are on separate layers. This means you can create multiple
essential pieces with different combinations of selected layers.
Refer to the animation which would show you how this works.

Animation:


As a technique to reduce your chance of making a mistake when
doing the status icons, at the saving window, right click in it and
change your view to “medium icons”. This way, you can see what's
the original image, and what you are about to replace it with.
Make sure the only difference between them is the color.

After I finish, I download another copy of the original and open it
up. Then I compare my folder's images and the original's, making
sure the name matches the right image. The first time I made a
layout, I found quite a handful of mistakes... If it's your first time
making a layout, I recommend you to double check using this method as well.

Remember that you are editing the images only, both the name and
its file extension should be kept the same. When you try to save
your images, you should get a notification that you'd be replacing
the original. Make sure you always get this notification so you
know you are saving it at the right folder with the same
name/extension as the original. Remember that banners' file
extensions should be .GIF and the Thanks button should be .PNG.

Make sure you do not recolor any pieces that you don't need to. For
example, post_new and post_old from the “statusicon” folder do
not need to be recolored as they are not color-specific pieces.

Once you're done redoing the images, use WinRar to
turn the folder into a .RAR file and post it on DZ.



For the css, you just need to change the color codes. Photoshop
gives you the color code for a color you selected. You can edit the
css by replacing the original colors to the colors of your layout.
Again, just replace the color-specific colors.



The banners and the thanks button are not in the download, so here it is for your convenience:








This tutorial shows you how to recolor the images a single color the way I do it,
there are other ways as well so you should experiment with Photoshop. Good luck!

[charlie.]

holy fucking shitz.
i love youuuuuu.

well written, pictures = perfect. I'mma go make a layout right now.
+rep

[TripelS]

I fuckin love you!

Thanks sooo much for this!

I am totally gunna try to make a layout now! <3

[ian]

very nice wayne :]
this is going to help alot of people, i can tell.

[Wayne]

Originally Posted by Charlie

well written, pictures = perfect. I'mma go make a layout right now.
+rep

Thanks, I think my animations are cool xD

Anyways, this is only a tutorial for only making layout a solid color,
if anyone's interested (post if you are), I can make a tutorial for making multicolor layouts

[Junex]

nice guide
i did it another way but this works too
hope this help us get lots of more lay colors

[Wayne]

Originally Posted by Junex

nice guide
i did it another way but this works too
hope this help us get lots of more lay colors

Well, I just posted two more layouts, (rainbow and christmas )

anyways, what way did you do yours? cuz my way is tedious sometime xd

[Junex]

My way is worse than that lol

[kaboomXkitsune]

omg i love you wayne! do you think it work just the same in gimp? because i dont have paintshop... well im gonna play around with it... thanks for giving me which things are color specific though thats really helpful for me!