Return colors to black and white photo.

Returning colors back to black and white photo in Photoshop is very easy to do, but mant peoples don't know how this can be done. This is a tutorial about basics of returning colors but you can learn a lot from it and it is realy easy to follow. Let's start.
Photo we'll use:

desaturate photo
Step 1

Open the photo in Photoshop first and take the brush tool.

return colors to photo in photoshop image 1
Step 2

Make a new layer, set its mode to color and choose a blue color for the sea. In this 1st layer we will return back the color to the sea.

return colors to photo in photoshop image 2
Step 3

Select a proper size for the brush tool, make it soft and lower the opacity a little bit.

return colors to photo in photoshop image 3
Step 4

Look ath the next image. You should avoid to brush over the boats. Their color should remain white! Look at this small details because they affect the final photo very much and they can make it look not proffestional.

return colors to photo in photoshop image 4
Step 5

When the sea is finish we can continue with the houses. Start with the first house, take the pen tool and start to make paths on a new layer. Also look at the settings I have choosed for my pen tool in next image:

return colors to photo in photoshop image 5
Step 6

After you're done with the path around the house, chose substract from area tool.

return colors to photo in photoshop image 6


Step 7

Now start to make paths around the window, this is because we don't need them in the selection.

return colors to photo in photoshop image 7
Step 8

Now when we're ready click with the mouse and choose to make a selection.return colors to photo in photoshop image 8

--- feather radius: 0

return colors to photo in photoshop image 8 - 2
Step 9

Take the brush tool again, choose a color you like. Don't forget to change the mode of the layer to color.

return colors to photo in photoshop image 9
Step 10

Whe u're ready with that you can select Hue Saturation and play a little bit with the colors. You should do this only while having the selection otherwise it will affect the other area.

return colors to photo in photoshop image 10
Step 11

A good thing is to reverse the selection and try to change a bit the colors of the windows.

return colors to photo in photoshop image 11
Step 12

Importand part here is to make the reflection of the house on the surface of water. Make a new layer and set it's mode to color again. Play with the brush tool again.

return colors to photo in photoshop image 12
Step 13

Always look about the details, everything must have different color and should look natural. Those timbers need to have brown colors here.

return colors to photo in photoshop image 13
Step 14

Here what we have until now:

return colors to photo in photoshop image 14
Step 15

Let's make the sky. On new layer choose the proper color and start brushing again.

return colors to photo in photoshop image 15
Final

So following those steps you can continue and return the colors to all houses of this photo. Here what I have at the final:

return colors to photo in photoshop image Final image 16

Thanks for reading this tutorial. I hope you like it and maybe you've learned a lot of useful things here. You can also download my PSD file from the download link and look at what other methods I have used to return the colors to all houses in this photo.

See ya, next time. ;)

Create an Abstract Piece Theme – Freezing Snow Cold

In this tutorial, you’ll learn how to create a snow-themed large piece. You’ll learn how to plan the composition of the piece, to add elements into the composition, how to recycle the piece itself to generate more elements for the piece, how to incorporate pentools into a design and finally how to finish off and fine tune the piece to make it look great.
Put on a scarf, jacket and gloves, switch on your heater, make yourself some tea and let’s get started!

Final Image Preview
Let’s take a look at the image we’ll be creating. Want more usefull information about the your relevant topic keep in touch with the “ http://www.buildtutorial.com “as for as your tutorial concerns.

Freezing Cold Snow Abstract final Create an Abstract Piece Theme – Freezing Snow ColdStep 1
Create a new document that is roughly 650px wide and 850px high at the default Photoshop resolution. Grab your gradient tool, and fill the “Background” layer with a radial gradient, with the foreground color as 9ab5c1, and the background color as d3dde0.

Freezing Cold Snow Abstract 000 Create an Abstract Piece Theme – Freezing Snow ColdDrag the gradient fill tool fromt he middle, all the way to the right, far out of the canvas to create a smooth gradient. You should have something like this:

Freezing Cold Snow Abstract 001 Create an Abstract Piece Theme – Freezing Snow ColdStep 2
Before starting the piece, we must first plan out a “skeleton” for all the elements to go on. I decided to base the piece off a zig-zagged shape flow. When trying to compose your own piece, ensure that you don’t have a composition that is simply a rectangle, square, or something boring. Use loads of edges and angles so you can have more to play around with when you start adding elements.
Using the pentool, create a few simple long shapes. I chose varying shades of blue and as you can see, I chose to make all the angles 45 degrees.
Pentool the lines vertically and then as you free trasnform and rotate a bunch of the shapes, hold down ‘Shift’ so the rotations will happen in short movements.
Composition wise, 45 degree angles help give the piece variety in composition so it’s not just one square as mentioned. Since they’re all sloping diagonally or horizontally, there is a sort of geometry created.

Freezing Cold Snow Abstract 002 Create an Abstract Piece Theme – Freezing Snow Cold

Freezing Cold Snow Abstract 003 Create an Abstract Piece Theme – Freezing Snow ColdStep 3
I’m quite happy with the base skeleton of this piece, so now it’s time to add some elements. With the theme of this piece being snowy, I decided to add some renders of snowy mountains. I chose a stock image of people skiing on the mountain. For you, a good choice would be stock with detailed mountains that are mostly snowy, but with a few rocks. A few rocks will add detail to the piece, while too many will make it too complicated. Avoid mountains that are just rocks or just snow. The stock I chose is from related web sites. If you want to use this as a texture, I suggest you make an account there and download it yourself.

Freezing Cold Snow Abstract 004 Create an Abstract Piece Theme – Freezing Snow ColdStep 4
Take out the magenetic lasso tool and use the settings pictured below to render the mountain. Move the magnetic lasso tool without clicking along the edge of the mountain. The magnetic lasso should snap to the edges of the mountain. Next, create a selection of what you don’t want in your render, and hit delete. Erase the little bits that remain. The great thing about rendering mountains is that they’re meant to be rough and craggy, so a quick render in this case works and no real edge refining needs to be done. The outcome is clean-cut, as shown.

Freezing Cold Snow Abstract 005 Create an Abstract Piece Theme – Freezing Snow Cold

Freezing Cold Snow Abstract 006 Create an Abstract Piece Theme – Freezing Snow ColdStep 5
Take the render and place it on your initial skeleton. In my composition, I decided to put the mountains against a corner. I did this because the right side of the mountain was cut off in the picture, so it made sense to put that side against an edge. Select the layer with your render, hit Ctrl – T for free transform and hold down Shift while transforming. This ensures that the render rotates the same way your pentooled shapes do.
Rotate the render until it looks good to you. I had to do a bit of erasing to make it work with the pentooled shapes. Use the eraser tool as you need it.

Freezing Cold Snow Abstract 007 Create an Abstract Piece Theme – Freezing Snow ColdStep 6
Continue cutting out mountains, and putting them where you like them best. As you can see, I kept the types of mountains fairly consistent – snowy with some rocks. It’s a good idea not to put all the mountains below the pentooled lines, since that would make everything quite boring. I layered the elements so that sometimes the mountain peaks went over the pentooled shapes. Make sure that you leave space in your piece for elements that you will add later. Notice that my bottom mountain isn’t really even against the pentooled shapes. You might want to vary what you do so the piece isnt over-organised.

Freezing Cold Snow Abstract 008 Create an Abstract Piece Theme – Freezing Snow ColdStep 7
At this stage, you should be confident that your base composition is good. From now on, we’ll be refining the base and adding things to what we have. My mountain shapes are looking very raw, so I duplicated each of my mountains and selected the lower layer of the two. Select > Blending Options > Color Overlay, and select a color that you used in your initial pentooled skeleton. Try not to use other colors, as we are trying to keep the color scheme quite uniform at this stage. Nudge the color overlayed-shape a few times so it gives one side of your mountain render an outline. Now we have managed to “tie in” the mountains with the shapes.

Freezing Cold Snow Abstract 009 Create an Abstract Piece Theme – Freezing Snow ColdStep 8
It feels like my piece is slightly too edgey and angular. What about yours? Adding some rounder elements would make the piece work much better. I decided to fill up the blank space I left in the middle right of my composition. To start off, I made a round circle using the Shape tool, holding down Shift as I make the circle so it’s a perfect circle.
The next step is to clip-mask things into the circle. Create a new layer above the shape layer, then right-click this new layer, and select “Create New Clipping mask”. Whatever you do on a clip masked area, it will only show within the perimeters of the layer below the clip masks. In this case, we want whatever we do to only show in the circle we created.
On the clip masked layer, go to Image > Apply Image and hit OK at the default setting. What you have showing in your circle is an image of the whole piece so far. I’m going to recycle the piece we have so far and use it to create new elements. I desaturate the clip masked image by hitting Ctrl + Shift + U, and move it around a little until it looks good. Next, create a new layer above the 2 layers you just worked with and also make this a clip mask. Grab a soft brush, size 300, make it black, and brush around the sides of the image. Create another clip mask layer on top, and then brush on some light blue colors. Use colors that match your piece.

Freezing Cold Snow Abstract 010 Create an Abstract Piece Theme – Freezing Snow ColdYou should now end up with a collection of layers that look something like this.

Freezing Cold Snow Abstract 011 Create an Abstract Piece Theme – Freezing Snow ColdThree layers clip masking one shape layer.

Step 9
The next step is simply to continue adding circle shapes as elements using clipping masks like in the last step. In my other circles, I decided not to desaturate the applied image. This makes it blend with the piece much better. Experiment though! You might come across something that looks much better. Here’s my outcome. I added circles near the corners of the piece to fill up the composition, and another at the bottom left again just to spice things up.

Freezing Cold Snow Abstract 012 Create an Abstract Piece Theme – Freezing Snow ColdStep 10
After using the color applied images to form the images in the circles, I realise that my desaturated applied image didn’t really work well. Instead of just changing it, I added another circle with a clipping mask on top, but this time, instead of brushing black though, I brushed white. The initial logic of brushing black was because it was under the rendered mountains. Now, however, since this circle is on top, brushing white to give it a ’shiny orb’ effect makes sense. Unlike other elements, I made sure this one was right on top of other layers and covered significant parts of other elements. Layering properly with the correct shadows is extremely important. This gives your piece depth.

Freezing Cold Snow Abstract 013 Create an Abstract Piece Theme – Freezing Snow ColdStep 11
At this stage, I’m quite happy with the weight and composition of this piece. But I’m not really happy with the overall feel of the piece – it’s really boring at the moment, with only mountains and recycled clip masks of the same image. It’s time to add a new element. I decided the piece needed something edgy, and also, as a rule, I try to include as much detail in everything I put into my piece. This is so that in the end the effect of “Fineness” shows through, and the elements arent huge chunky blocks. I decided on this stock image of an industrial plant. The stock u can find from related web.

Freezing Cold Snow Abstract 014 Create an Abstract Piece Theme – Freezing Snow ColdThe high spire on the right of this image is a good choice, it sticks out the most and is very usable in our piece.

Freezing Cold Snow Abstract 015 Create an Abstract Piece Theme – Freezing Snow ColdZooming in, I begin to isolate that part of the piece I want. I do this using the polygonal lasso tool. I don’t usually do this to render, however, the magnetic lasso misbehaves on this, the white in the background and the white of the pipes are way too similar, causing the magnetic lasso to cut this image quite badly. Go all the way around and close the lasso.

Freezing Cold Snow Abstract 016 Create an Abstract Piece Theme – Freezing Snow ColdHit Ctrl-I to invert your selection, which is the object you actually want. Hit Delete. This deletes off everything else and you’ll be left with a fairly clean cut-out object.
Step 12
The reason I chose a long-ish (vertical) element was because I wanted to have an element that added detail into the piece, but not ruin the shape of it. Now I’ll adjust the element and align it with my initial composition.

Freezing Cold Snow Abstract 017 Create an Abstract Piece Theme – Freezing Snow ColdAligning it with my composition means that the elements will have to be parrallel with those red lines above. This ensures that the new elements do not mess up the flow and weight of this piece. Taking the render, I hit Ctrl – T to free transform it, and hold down Shift as I rotate the render to be parrallel with my skeleton.

Freezing Cold Snow Abstract 018 Create an Abstract Piece Theme – Freezing Snow ColdYou might have noticed I varied the sizes of the renders and made the one at the bottom lighter and desaturated. This is to try to give variety to the elements I added.
Step 13
I’m done with adding renders and high-detail elements, so now for some simpler shapes. While I think of what shapes I should add, I’m always bearing in mind that the shape shouldn’t disrupt the flow and weight of this piece. However, I want to avoid using boring straight rectangles just to fill up the composition. I need to use something simple yet appealing. I decided on an L shape.

Freezing Cold Snow Abstract 019 Create an Abstract Piece Theme – Freezing Snow ColdI started off holding down Shift to pentool a normal, L shape, but I felt was slightly boring, so I decided to curve it. For those who are newer with the pentool, you can achieve this by adding two pentool points on either side of each of the L corners and then remove the initial corner so a curve is created between the two new points you’ve made. By dragging the 2 points and by moving the curve, I’m able to make a nice curved L shape. After my shape is done, I right-click > Create vector mask.
Hint – It’s a good idea to hold down Shift while you manipulate this shape. This will keep everything straight.
Step 14
Now we have these shapes, it’s time to apply them to the piece. Again, using an L shape is a good idea, because if you rotate it 45 degrees, whichever direction the L shape points to, it will always be parallel with the flow of the piece.
Vector masks mean you can paint whatever you want to the layer and it won’t affect the overall shape of the object. I fill each layer with a dull blue and vary this slightly for each of the shapes. I take a soft brush and brush the edges of the shapes slightly white and black to make it look better. This is similar to the brushing of the orbs using clipping masks in Step 8.

Freezing Cold Snow Abstract 020 Create an Abstract Piece Theme – Freezing Snow ColdStep 15
Something I do with all my pieces is to add some sort of texture. In this case, I wanted to keep the background clear, so I decdided to use splatter brushes behind the composition. The 2 brushes below I downloaded from Deviantart.com – they’re by artists quells and Osiris2735 respectively. I arranged these splatters behind the pieces so only the drippy parts show. Satisfied with some light splattering, I decide the piece needs some more effects.

Freezing Cold Snow Abstract 021 Create an Abstract Piece Theme – Freezing Snow Cold

Freezing Cold Snow Abstract 022 Create an Abstract Piece Theme – Freezing Snow ColdStep 16
Effects serve the purpose of hiding the “rawness” of the piece, and in this case, it’ll turn a bunch of renders into an art piece. The piece has a snowy, icy atmosphere, but it’s missing something that goes hand in hand with cold mountains… clouds! I downloaded a great cloud brush pack from Deviant Art.

Freezing Cold Snow Abstract 023 Create an Abstract Piece Theme – Freezing Snow ColdAfter that, it’s a simple matter of brushing them around the piece. Now the piece is starting to look less flat and much nicer.

Freezing Cold Snow Abstract 024 Create an Abstract Piece Theme – Freezing Snow Cold

Step 17
I decided that more flashy effects were needed. By luck, I just finished creating a pack of fractals with ChaosScope. ChaosScope is open source software that generates colorful fractals. Below are some fractals I made with the software, which I then used in the piece. I simply desaturated the fractals by hitting Ctrl-Shift-U, and set it to a linear-dodge layer mode. The types of fractals I used are shown below. If you are generating your own fractals, be sure to use those with edges, and not smooth flowy fractals. You want to give the effects a sharp feeling.

Freezing Cold Snow Abstract 025 Create an Abstract Piece Theme – Freezing Snow ColdStep 18
Looking at the piece, the “raw” parts that stand out most are the pentooled lines. They form the framework for the piece but are looking lonely right now. Using the ChaosScope fractals, align them on linear dodge to the lines so you create a sort of ‘rushed’ effect. Erase anything that looks bad with a soft brush. I get something like this.

Freezing Cold Snow Abstract 026 Create an Abstract Piece Theme – Freezing Snow ColdStep 19
Time for some fine detailing. The piece is quite solid, but everything is stuck to the main frame. To fix this I added 2 small bits of detail.
Using Pentool > Elipse, I drew a circle. Hold down Shift while drawing the pentooled lines to make this circle a perfect one. Right-click the pentooled lines, and “Create Vector Mask”. On the normal layer, I then go to Image > Apply Image and hit OK with the default settings. Although you applied the whole piece so far, only a little circle of it will show. Unlink the layers (as shown below) so you can move the layer or the layer mask around seperately. Below is an unlinked layer. As you can see, the chain between the layer mask and layer is gone, allowing me to move it around. The two added circles are shown below. Other than a clipmasked area, I also added a blue colored solid filled circle behind.

Freezing Cold Snow Abstract 027 Create an Abstract Piece Theme – Freezing Snow Cold

Freezing Cold Snow Abstract 028 Create an Abstract Piece Theme – Freezing Snow ColdStep 20
For more detail, I downloaded a set of bird brushes from web search. There are many sets of bird brushes on Deviant Art, so find one which has many smaller birds. I brushed and erased a little, and here is the outcome. I decided to add birds in the middle.

Freezing Cold Snow Abstract 029 Create an Abstract Piece Theme – Freezing Snow ColdStep 21
Now to add a little more shine and detail to the piece, add some little sparkles. I like to add night sky stocks to the piece, since the stars in the sky work as good sparkles, and usually there is a glow to photos of the night sky. The flow can add shine to your piece. I used a few night sky stocks taken by a friend, but you can easily find stocks from Deviant Art. Nebula stocks will also work. I arranged the sparkles to come off the mountains, and as you can see, the sparkles are VERY slight and hard to see. Don’t worry, the sparkles will really show soon enough. In this step, I also added some random 1 px pentooled lines in parts of the piece.

Freezing Cold Snow Abstract 030 Create an Abstract Piece Theme – Freezing Snow ColdStep 22
The background is looking a little flat, so going back to the background layer, I created a new layer above it and brushed the edges black with a very soft brush (I used a 1500px soft black brush). Do the same with white on the seperate layer, but brush in the middle. Set both of these layers on 35% opacity for the black and 40% for the white. This gives the effect that there is a spot light on the piece.

Freezing Cold Snow Abstract 031 Create an Abstract Piece Theme – Freezing Snow ColdStep 23
Using more chaos scope fractals, I added a blue effect to the background. The type of fractal I used is slightly different though. I created more explosive, effectual fractals for this. These are desaturated before I add them.

Freezing Cold Snow Abstract 032 Create an Abstract Piece Theme – Freezing Snow ColdStep 24
Finally, with everything in place, it’s time to make the piece’s atmosphere really solid. At the moment, it is slightly bright, so we will add a curves layer to darken things up. Using a curve layer on quite extreme settings, I darkened the whole piece.

Freezing Cold Snow Abstract 033 Create an Abstract Piece Theme – Freezing Snow ColdI also added two gradient maps, both are black and white.
1- From Black to White – Set on luminosity – 12% – Adds a little contrast
2 – From White to Black – Set on Normal – 20% – This desaturates the piece slightly

Freezing Cold Snow Abstract 034 Create an Abstract Piece Theme – Freezing Snow ColdStep 25
The piece is almost complete! I gave the piece another black and white gradient map to desaturate the blueness of the piece’s edges (again use soft brushing!), because I felt it was taking attention away from the center. After that, create a new layer, go to Image > Apply image and now you have your whole piece in one layer. Sharpen this layer and set it on 60%. And there you have a complete, polished piece.
Conclusion
I actually added some shiny effects that I made myself. These are simple to make – just draw random lines with a hard white brush, and motion blur it alot, and you get these fast, blurred effects.
And there you have it, a snow-themed abstract piece.

Freezing Cold Snow Abstract 035 Create an Abstract Piece Theme – Freezing Snow Cold

How To Create A Set Of Stylish Social Bookmarking Buttons

As a first tutorial here on Raster Rebels I would like to start out with something that everyone can enjoy and use. If you are a blogger and don’t like those pesky, always so ordinary, social bookmarking buttons this tutorial is absolutely for you. Within this tutorial you will be able to change and create just the kind of stylish button that you would like and to fit your own blog. But, in this one I am going for an all colored up set of buttons that could possibly grace whatever blog and even bring up the quality of it a bit.

In this tutorial you won’t be needing any pre learned skills more than the knowledge of how to use the most common tools in Photoshop and the mouse. We will however go through some CSS and HTML code at the end of the tutorial in order to set up the buttons to get them working. But I will take you through that part each step of the way so there should really not be anything to worry about.

This particular set of bookmarking buttons will include 5 of the most common Social Bookmarking sites. If you want to have less or more that’s entirely up to you but for this one I am going for 5. Adding more buttons is quite simple and really just entail creating a few more. The coding is still the same for each button. However, a word of advice when you create more of them. Make sure you measure the width of the particular space you want your bookmarking buttons to end up. Otherwise you might have to go back and redo a big part of the design work.

Alright, enough about that now. Let’s begin the tutoring and create those shiny buttons.

Step 1 – Setting Up The Work Area

The first thing you have to do (besides starting up your Photoshop) is to create a new work area where we can create our graphics. I have chosen a size of 625 pixel wide and 300 pixel high. This will ensure that I have enough workspace to work on. I usually measure the text space (the actual area where text is able to be published) on the blog I am doing social bookmarking buttons for as that will make it aligned and look quite nice.

I will be using the entire width but not the entire height. This is only to give a bit more visual area to work with. I will go ahead and crop the image down once I am done with all the buttons.

Depending on what color your text area has on your website choose the background color that you have in order to easier decide what colors of the buttons work best for your site. I will be using a White (#FFFFFF) background as my text area is white.

There, now we have our work area set up.

Step 2 – Creating The Foundation For The Button

As we want to have the buttons span all the way from the left side to the right we want to use the entire width of the work area. And as we want to have 5 buttons we need to calculate the width each button should. This is all simple math. 625 (Width) / 5 (Number of Buttons) which is 125 pixels wide. So each button should be 125 pixels wide.

I want the buttons to be fairly thick as well to be able to fit some necessary information on there like the name of the Social Bookmarking Service as well as some encouraging message to get the visitor to really get tempted to use it. So I have decided to make the buttons 60 pixels high.

Now that we know the width and height of the button all we need to do is to create the foundation for them. Pick the “Rectangular Marquee Tool” and create a selection that is 125 pixels wide and 60 pixels high. Doesn’t really matter at this point where you create the selection as we will move and copy the finished button later in order to create another 4 buttons.

Before we fill this area we need to create a new layer in order to make sure the button doesn’t mesh together with the background. So go ahead and create a new layer called “Button” with the button at the bottom of the layers window.

With the selection still in place pick the “Paint Bucket Tool” and then choose a color you wish your button to be. I am going with a Black (#000000) foundation for the button as that will blend and still look quite eye catching on the White background that my site has.

Fill the selected area with the chosen color and then de-select the area by picking the “Rectangular Marquee Tool” again and clicking outside of the selected area. You should now have something that looks like this:

Step 3 – Adding Realistic Effects

We have our button foundation and it’s time to create some effects that makes the button “pop out” a little. Select the “Button” layer and right click it to bring up a menu. In the menu click “Blending Options…“, a new window will open where we will insert our effects.

Click the “Bevel and Emboss” checkbox and then click that tab to bring up the panel. To create a little bit more realistic button we are going to add some volume to the it. Insert these settings:

We now have a button with a little but of body and shine to it which later will play a part in the overall realistic look of the button. Now we shall add a little more shine to it in order to simulate a glossy surface. Click “OK” to close the window with the settings we’ve just entered.

Create a new layer on top of the “Button” layer and call it “Shine“. Now, again choose the “Rectangular Marquee Tool” and select the entire button foundation. We will fill this area with White (#FFFFFF) color to simulate the shine. Next change the “Opacity” to 20% for the “Shine” layer which will reveal the bottom black foundation.

Now select the “Elliptical Marquee Tool” and select most of the button leaving only a portion of the left side and top corner unselected leaving you with something like this:

Press the “Delete” key to delete the selection only leaving you with a portion of a corner left. As you can see we are slowly simulating a glossy surface on the button. It will further pop out when we add some text and graphics to the button.

Let’s create the other five buttons by copying both layers so that we get exactly the same button and shine layer five times. All you have to do is to select the “Button” layer and then select the button foundation using the “Rectangular Marquee Tool” and then click “CRTL“+”C” to copy and then “CRTL“+”V” to paste it. You will get several layers so don’t forget to name then after the Social Bookmarking Service you intend for them to be connected to. Even the first button we created.

After you have copied the buttons and created 4 more buttons exactly the same you should now have something looking like this:

For you to understand the layer structure I have also included the layer view. As you can see I have also copied the effects we created in the “Blending Options…“. You can easily do this by right clicking the first button foundation we created and select “Copy Layer Style“. All you have to do now is to right click all the other 4 button foundations and select “Paste Layer Style” and they should get the exact same properties as the first one.

One thing to remember is that the top button layers should be for the button on the farthest left side of the working area. Then working it’s way down as the buttons are added all the way to the right. Right being the bottom layers in the layer structure.

Now what we have to do before we add a reflection to the buttons is to add some shadows. The shadows will create a nice separation line between the buttons to create a sense of order and control. Right click the top “Button” (mine is the “Digg Button” layer) layer and again select “Blending Options…” and when the window opens check the “Drop Shadow” checkbox and click the tab to get in to the settings. Now add the settings below and click “OK“.

Don’t worry about the shadow going outside the buttons at the top and bottom of the button. This will all be fixed when we crop the buttons to the right sizes later. Now copy that top “Digg Button” layer settings by again right clicking the button layer and select “Copy Layer Style” and paste it to all the other button layers but the farthest to the right (which is the bottom of the stack) by right clicking on them and selecting “Paste Layer Style“. When done you should have something looking like this:

There, our buttons are now stacked and looking quite promising. But, we could need a little more attention to the separation of the buttons so let’s create a little line at the end of each button but the last in the stack (the one farthest to the right). Pick the “Rectangular Marquee Tool” and select the right edge of the top button layer (“Digg Button“). make the selection 1 pixel wide and 60 pixels high. Now, select the “Paint Bucket Tool” and choose a middle Gray color (#1D1D1D). When done you should have something looking like this:

Now what we have to do is to add some reflection to the buttons, Something that will make them look a bit more real before we add all the graphics and texts. I am using a black and white photo I took in my studio. You could really use whatever photo you want, Color or Black and White, it’s really up to you.

Load your photo and select a 625 pixel wide and 60 pixel wide section of the photo using the “Rectangle Marquee Tool“. Copy the selection by pressing “CRTL“+”C” and then go back to your buttons session. Select the very top layer (in this case it’s the “Digg Button – Shine” layer). Then press “CRTL“+”V” to paste your selection into a new layer that will end up above the top layer.

Name the new layer “Reflection” and set it’s “Opacity” to 6%. Now align that new reflection exactly over the buttons. When done you should have a slight reflection like effect on the buttons really making them look like they are not created from the same mold. When done you should have something looking like this:

Our button structure is now done and we can move on to adding the graphics and text that will make the buttons stand out even further.

Step 4 – Graphics & Texts

Time to add the graphics and the texts to the buttons. I have, as said in the beginning of this tutorial, five of the most popular Social Bookmarking services to link up to. What you choose is really up to yourself and what you think is best for your site. Content and spread is what it’s all about when choosing what way to spread the word. I have chosen these (if you haven’t yet seen it in the layers structure):

• Digg
• Buzz
• StumbleUpon
• Twitter
• Delicious

What I need now is the icons for these services to incorporate them into my buttons. Icons for each of these services can most likely be found on their own sites but you could also use Google to find the logos that you are searching for. Just make sure you get a normal size logo so you don’t have to blow it up in order for it to fit cause that will totally ruin the look of the button. Better sizing them down and using the “Filter > Sharpen” tool get some of that crispiness back. Here are the logos I have chosen (I have already sized them down to the size I want them to be here):

Alright, now when we have those icons prepped and ready to go on the buttons why don’t we start by adding the “Digg” icon to the “Digg Button“. Copy the icon, again using the “Rectangular Marquee Tool” to select them and then press “CRTL“+”C“. Select the “Digg Button” layer and press “CRTL“+”V” to paste it in. It will end up in a layer in between the “Digg Button” layer and the “Digg Button – Shine” layer. name the new layer “Digg – Icon“.

What we have now is the graphics of a Digg Icon looking like it has a shine on it. But, let’s further style it. With the “Digg – Icon” layer selected go the menu and click “Edit > Transform > Rotate” and rotate the icon 45 degrees clockwise. After adding the icon to the re-sized it to 75% of the original size in order to make it more visible on the button. You do this by selecting the layer and the go to the menu and pick “Edit > Transform > Scale” and add 75% in each of the “W” and “H” edit boxes at the top of the screen.

Position the newly rotated icon at the far end of the “Digg Button“. We have to contain the icon so it doesn’t spread outside of the button and that we do easiest by right clicking the “Digg – Icon” layer and selecting “Create Clipping Mask“. The icon will immediately pop inside the button and be contained. Now repeat this with all the buttons and when you are done you should have something looking like this:

We’re starting to see where these buttons are heading. We need to add some text as well in order for the visitor to see what the buttons really do. It’s more of a reassurance that they know what the icons represents.

Select the “Digg Button” layer and then pick the “Horizontal Type Tool“. You decide yourself what font you want to use but I am going to go ahead and use “Franklin Bold Heavy” with the font size set to 16. This makes for a nice neutral and strong look of the text. I am also choosing the color White (#FFFFFF) for the text but this entirely depending on what color you have chosen your buttons to be.

Now type “DIGG“, with capitals, on the black area on the “Digg Button“. We also want to encourage our visitors to click this button so lets add a smaller “THIS” to that text. Use the same font but make the size 9 instead. Also set the letter spacing to 200 in the “Character” option located to the right side of the screen.

Repeat these steps for all the buttons and when you are done you should have something that is looking like this:

Our buttons are now finished and they are looking quite crisp. We however need to add one more thing before we can move on to create animated buttons out of these. We need to add a little glow inside them when the user hovers over them.

Create a new layer just on top of the “Digg Button” layer and call it “Digg Button – Glow“. Pick the “Elliptical Marquee Tool” and create a circle about twice as big (177 pixel wide & 117 pixel high) high under the “Digg Button“. Pick the “Paint Bucket Tool” and Black (#000000) color and fill the circle. You won’t see the circle being filled and that’s because the layer is a masking layer. It’s not really the circle we’re after merely use it as an effect carrier.

Now right click the “Digg Button – Glow” layer and select “Blending Options…” and then also click the “Outer Glow” checkbox and also the tab to bring up the settings. Choose the color you want to use for the glow but then insert these settings:

As said, the color is up to you and if you want to change the intensity of the glow go ahead and do that as well by modifying the “Opacity” and the “Size” settings. After adding these settings to the circle effect carrier you’ve just created you should have something looking like this:

Repeat the above steps for all the Buttons. What we are doing is really creating an effect that we’ll use when we “animate” the button later in CSS. We will use to stages of the button to create the animation and the illusion that it lights up when you hover the button. What we really will be able to do when we do this is to toggle the glow effect on and off to make our intended effect.

It’s time to create the actual button so let’s move on to that part of the tutorial.

Step 5 – Creating The Button Files

Time to sort all the buttons out so to speak. What we need to do is to actually compress all the layers twice. One with the glow effect off and one with the effect on. This way we have to stages of the button which will serve it’s purpose when we hover over it.

But what we need to do first is to crop the image to only show the buttons and get rid of some unwanted shadows and white area. To do this we need to flatten all the layers into one layer. But before that we need to save it. So go ahead and save your session as a PSD project.

Now, when having done that we can go ahead and flatten the layers twice. First turn off all the glowing layers by clicking the little “eye” icon in the layers window. This will make the layers invisible and won’t end up in our image this first round.

Go to the menu and select “Layer > Flatten Image“. As you can see we now only have one layer. Time to crop the image. Choose ONLY the 625 pixel wide and 60 pixel high area where the buttons are located using the “Rectangular Marquee Tool“. Then go to the menu and select “Image > Crop“. As you can see all the area around the buttons are deleted and we end up with the buttons only. Now save this image as “Social Buttons – Active.jpg“.

Now do the same thing with the glow effect on and save the finished image as “Social Buttons – Static.jpg“. After doing this you should now have two files looking something like this:

Our buttons are now ready to be cut into smaller pieces that will form the animated buttons after we have added the CSS script to our CSS Style file.

Open the “Social Buttons – Static.jpg” file and select the first (left hand button, the Digg one) all the way to the little Gray separation line we created earlier. Again use the “Rectangular Marquee Tool” to select. Then press “CTRL“+”C” to copy your selection.

Now go to the menu and open a new session, call it “Digg Button“. Change the height of your new session to 120 pixel and then press “Ok“. We now have a new session that will fit both the Static and the Active button mode in it. Press “CRTL“+”V” to paste the static button selection that we copied. When done make sure you move the button all the way to the top.

Open the “Social Buttons – Active.jpg” file and copy the “Digg” button in the exact same way as we did with the “Static” button. Go back to our newly created new session (“Digg Button“) and paste your selection, just like with the first static button.

Move the new, active, button graphics to the bottom of the work area. You will now have the graphics for our button, all we have to do now is to save it. Save your button as “jpg” and call it “Button – Digg.jpg“. To make sure you have done the steps right, when done you should have something that’s looking like this:

Now do the same with all the 4 buttons that are left before we continue. make sure you align all the buttons just right and don’t forget to set the height to 120 before continuing. To simplify things use these names for the buttons. Always easier to put names that are directly associated with what it’s doing. If not, then you will most likely be looking around for the button and wish you had used a more convenient name.

• Button – Digg.jpg
• Button – Buzz.jpg
• Button – Stumble.jpg
• Button – Tweet.jpg
• Button – Mark.jpg

There, now when we have all our buttons cut and filed we can move on to implement them on our site and also add some flair to it. A simple animation using CSS is what’s going to bring these buttons alive.

Step 6 – Implementing The Buttons

Time to do some work on the implementation of these buttons. It’s quite simple and it will make your buttons looking really good and with just a few lines of code. We will be doing this code in our style.css file. So open that up in your favorite word processor or website editor application. Let’s start with the CSS part:

.diggrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Digg.jpg”) 0 0 no-repeat;
float:left;
}
.diggrollover a:hover {
background-position: 0 -60px;
float:left;
}
.diggrollover a:active {
background-position: 0 -60px;
float:left;
}

Now to explain the small code we have to implement. No worries, it’s quite easy and but will truly make a difference when you add buttons to your page. It’s a much faster way of loading buttons and the button won’t “stall” when you hover over it first. This occurs when the computer have to download the next phase in the animation which sometimes looks like the button stalls for a while. This way we will pre-load all the graphics for the button which when you hover over it will instantly be displayed.

Line 1: Declares a new class called “diggrollover”. It also states that the button should contain the underlying settings in it’s idle state.
Line 2: Declares how the html will be displayed.
Line 3: Sets the width of the button which in our case is 125 pixels (px) as the button is that wide. Also called in this case the visible area.
Line 4: Sets the height of the button which in our case is 60 pixels (px) as the button is that high. Also called in this case the visible area.
Line 5: Declares the image we want the button to have in it’s idle state.
Line 6: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 7: Executes (ends) the “Idle” state declaration.
Line 8: Declares the same class but in its “Hover” state. This means we are declaring the settings that the button should have when you put your mouse over the button.
Line 9: Declares that the button graphics (that we loaded in the “Idle” button state) should move 60 pixels upwards.
Line 10: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 11: Executes (ends) the “Hover” state declaration.
Line 12: Declares the same class but in its “Clicked” state. This means we are declaring the settings that the button should have when you click the button. In our case we don’t have any graphics for that. But if we wanted we could add another 60 pixels in height of our buttons and add another button effect to simulate the clicked state of the button.
Line 13: Declares that the button graphics (that we loaded in the “Idle” button state) should move 60 pixels upwards. Again, we’re using the same effect as we did in the button’s “Hover” state.
Line 14: Makes sure that the button is aligned to the left of the screen. Also makes it possible to add text on the right side of the button without changing the position of the button itself.
Line 15: Executes (ends) the “Hover” state declaration.

The core of the button’s behavior is now defined and the settings for it’s different states are inserted. All we really need to do now is to add some code that will display our buttons on our blog or website. This couldn’t be more easy and takes just a few lines of code to implement.

To add one (for example the Digg one) button we only need to add this code wherever you want your button to pe positioned.

” target=”_blank”>

This will put your button on the position you wanted it to be and when clicked it will take you to the Digg website with the website or article you want to Digg pre-entered.

A short explanation of what the code does is quite simple:

“div” tag is to create a new division.

“class” tag is to connect the “div” tag to the correct behavior that we set up in CSS.

“a href” tag is where we want to send the user when they have clicked the button

“http://www.rasterrebels.com/tutorials/how-to-create-a-set-of-stylish-social-bookmarking-buttons/” tag is to grab the URL (website address) that is going to be shared on the spacific social bookamrking site.

“target”_blank”” tag is to open a new tab to send the user to when he/she clickes the button. This helps keeping your own site open as and not lost in all the clicking and sharing.

“/div” is to execute our division making it a closed division that can be compared to a “block“.

To set up all your buttons it only takes the same codes 4 more times and it will have them all set up. But, to help you with that and to make sure you can just copy and paste I will include all the code for the Style.css file as well as the buttons html code as well down below:

.diggrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Digg.jpg”) 0 0 no-repeat;
float:left;
}
.diggrollover a:hover {
background-position: 0 -60px;
float:left;
}
.diggrollover a:active {
background-position: 0 -60px;
float:left;
}
.buzzrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Buzz.jpg”) 0 0 no-repeat;
float:left;
}
.buzzrollover a:hover {
background-position: 0 -60px;
float:left;
}
.buzzrollover a:active {
background-position: 0 -60px;
float:left;
}
.stumblerollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Stumble.jpg”) 0 0 no-repeat;
float:left;
}
.stumblerollover a:hover {
background-position: 0 -60px;
float:left;
}
.stumblerollover a:active {
background-position: 0 -60px;
float:left;
}
.tweetrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Tweet.jpg”) 0 0 no-repeat;
float:left;
}
.tweetrollover a:hover {
background-position: 0 -60px;
float:left;
}
.tweetrollover a:active {
background-position: 0 -60px;
float:left;
}
.markrollover a {
display:block;
width: 125px;
height: 60px;
background: url(“/images/Button – Mark.jpg”) 0 0 no-repeat;
float:left;
}
.markrollover a:hover {
background-position: 0 -60px;
float:left;
}
.markrollover a:active {
background-position: 0 -60px;
float:left;
}

As you can see it’s the same code as we had for the Digg Button but we have replaced the class name for them as well as the graphics used for the button. It really isn’t harder than that to set up in CSS.

As for the buttons being positioned anywhere on your blog/website, all you have to do is to copy this code and place it wherever you want and it will show up all nice and cool.

” target=”_blank”>

&title=“ target=”_blank”>

&title=” target=”_blank”>

: ” target=”_blank”>

&title=” target=”_blank”>

There, the code might look a bit complicated at first but it’s really just the same code (almost, with the exception it’s linked to the different sites) over and over again. So when you have all your buttons created, cut and saved individually and uploaded to your server, just slam this code into the position you want your buttons to appear. Should really be all there is to it.

The Buttons – Preview

If you have followed this tutorial all through and correctly you should now be presented with a panel of buttons that is working and looking somthing like this:

As you can see, when you hover over the buttons they lit up instantly without having to load any graphics for the hover state. This makes for a much faster user experience when the visitor is browsing your website or blog.

You also have the choice of sending the visitor off to a new blank page when opening the link by clicking the buttons. As described above this is done with the “target=”_blank”” tag. If you would like the link to be opened in the same “tab” as the visitor is currently on just discard the “target” setting and the link will be opened in the same “tab“.

Round Up

Alright, so we have successfully finished the tutorial and you and all your visitors should be able to enjoy that panel of buttons connected to the most popular social bookmarking sites on the Internet. Of course you can fit in however many buttons you feel is necessary but just make sure that you are checking the width of the position you want to place them in so you don’t have to go back and redo everything.

The design is really just up to you as well. I went with this fairly simple design as it is eye catching as well as easy to understand. The more eye catching you make those buttons the bigger is the chance that the user will click to share with all his/her friends and followers on these social bookamrking sites.

The success of your article being “subbed” is really up to the content of it. As with this tutorial for example. There is no telling if it will be successful or just go down as a regular tutorial after it has been published. But that’s social bookmarking in a nut shell. We just have to do our best and hope that it will go viral some way or another.

If you have enjoyed this tutorial please don’t hesitate to comment and share it through your favoured social bookmarking site. Also don’t forget to follow us on Twitter as well as subscribing to our RSS Feed. There is going to be plenty of cool things coming up here on Raster Rebels so make sure you don’t miss out.

Well, that’s it for this time and see you again in my next tutorial.

Enjoy!

Eyes on Fire

Hey guys. Yes I am back. Sorry for being quite for few days, but yes I am officially back, and back with a tutorial:) Today we are going to be going into a world of masking and layer settings. So sit back, relax and enjoy!







So lets get started shall we. First I wanna thank La Luna and Soraneko for there beautiful stock images. Alright, back to the tutorial.

Step 1: First start by opening your image of choice into photoshop!Step 2. Now we are going to enter quick mask mode. You can do this by hitting the shortcut B or by going through the menu sequence - Select – Edit in Quick Mask Mode.Step 3. Now we are in Quick Mask Mode. Let the fun start. First go pick any brush that your comfortable with. I am going old school mode and choosing a circular brush:) Now start painting inside the eye, but don’t get into the pupil. So all around the pupil in simple word.Step 4: Now once again, leave Quick Mask Mode by hitting the shortcut B or by going through the menu sequence - Select – Edit in Quick Mask Mode.Step 5: Now we are finally out of Quick Mask Mode. This is the easy part! Select the rectangular marquee tool by hitting the shortcut M. After selecting the rectangular marquee tool, right click on your selection and hit inverse.Step 6: Now we want to insert our texture. Once again I wanna thank La Luna for her beautiful fire image where you can find here! After finding an image you want to use, copy that image and go back into photoshop. When you are into photoshop, enter the following shortcut Shift+Ctrl+V, or go through the following menu sequence – Edit – Paste into.

Step 7: Nearly done people, hold on tight. Now we have our image into the eye, but we are not finished yet. You can move the fire texture or even resize it until your happy with how it looks.Step 8: Now we are going to change the layer mode of the fire image into Hard Light.Step 9: After the fire layer has been changed to hard light, change your layer opacity down to 65%.

Your done guys. Thats it. Very simple like I said, but yet very effective. Hopefully this has taught you more about how easy and effective quick masking is, and also an introduction to how the different layer options can you different results. Don’t leave yet guys, you can view my final image here. And also don’t forget, if there is any comments, questions, queries, just ask us through our comment question:)

Create Typographic Art using Illustrator and Photoshop

Materials Needed:

• Grunge Textures

Final Image Preview

This image is inspired from the cover of LAYOUT, dasar & penerapannya, a graphic design book by Surianto Rustan published by Gramedia in Indonesia. Before starting this tutorial, see the result below. Click here to see the image at a higher resolution. The Illustrator and Photoshop files can be found at the bottom of this post. You can also see more of work at my website DesainDigital.com

Step 1: Creating Word in Illustrator

Open up your Illustrator. Create new document (File|New) with Document Profile: Print, size: A4.

Create word LAYOUT using tool type.

Step 2

Select the word. Click Object|Expand. Click OK.

Click Object|Compoundd Path|Release.

Step 3

With tool select arrange every character until align nicely.

With the direct selection tool, move some points within the U to give it more room.

Here’s what i come up with.

Step 4

Select all the characters. Then from the toolbox, click the switch icon to switch the fill and stroke color.

Step 5

Above the L character create a box.

To make sure it aligns perfectly with the L, click Edit|preferences. Make sure you select Snap to Point. This small step will save you lots of time when arranging objects.

Step 6

Create a box behind the Y.

Another box behind O.

Another box behind T.

Step 7: Start Adding Text – L

Activate the type tool. Hover the cursor over the L. You will see a circle around the cursor. Now click to insert some text inside the L shape. I used the famous lorem ipsum text generated from lipsum.

I’m using Helvetica Neue Lt Std here because it’s simply the best font ever and works in every style. For L i use Bold Condensed style. If you dont have this font feel free to use other similar font.

Step 8

Double click the text to select all. From the paragraph panel select alignment justify.

Click on the small arrow to open the panel menu and select Hypenation. Move slider to Better Spacing.

Here’s what i have so far.

Step 9

Paste some more text inside the box above L. Change the style to Light Condensed.

Step 10: Y

Lets move on to the Y now. This one is much more complex and take more time doing it. Paste some text into the box, not the Y shape. Use style Light Condensed.

Select characters inside the Y shape and change its style to bold condensed.

Repeat this process with all the text found within the outline of the Y. As I said before this takes lots of time.

After the required characters have been changed to bold, you can then click the eye icon in front of the Y shape layer to hide it. Here’s what i have so far.

Step 11: O

Select the outer circle of O. Resize it until it is taller than its box.

Step 12

Select the outer circle and box. Open the pathfinder panel and click Exclude. Right click and ungroup.

Step 13

Select top and bottom path then hit delete.

Step 14

Add text to each path. Use align justify for right and left path. Use align center for circle path.

Step 15: U

Select the U shape. Using tool move rotate it 90 degrees.

Step 16

add another load of text. Use style bold condensed.

Step 17

Using the rotate tool, rotate the U shape back to its previous place.

Step 18:T

Add text to T shape.

Step 19

Open the panel character. Double text leading size, in my case from 7,2 to 14.

Step 20

Add text to the box behind the T shape. Use the same text leading like in the previous step.

Step 21

Insert minus leading. Remember step 19? I have text leading 7, so in my case i use -7.

And we’ll have both text overlapping and create a T shape.

Step 23: A

We haven’t worked on A. With the pen, create a shape covering half the A.

Step 24

Insert some text.

Step 25

Using the move tool, rotate the shape until it perfectly aligns horizontally.

Step 26

Using the rotate tool, rotate the shape back to its previous place.

Step 27

Do the same to the other half.

Step 28

Don’t forget to add text to the bridge. After this you can hide A shape.

Finally this is what i have.

Step 29: Export to PDF

Now, we need to import this into Photoshop. First, we need to save it to a format that can preserve its vector quality. I recommend PDF for this.

Click File|Save As. Choose format file PDF. In PDF setting use Press Quality. This setting is used for commercial printing and saves all the details relating to the composition of the image.

Step 30: Import to Photoshop

In Photoshop click File|Open. Choose the PDF file we just created. Use resolution 300 pixel per inch or 300 ppi.

Why we use resolution 300 ppi?

Press Quality setting creates a 300 ppi PDF. So, using resolution 300 ppi, the file is imported at full size, without losing any pixel resolution. This means we still have every detail created from within Illustrator. The picture below shows the imported picture in 100%, white background. As you can see, the text still very sharp.

Step 31

PDF will be imported as a transparent picture.

Step 32: Start Editing in Photoshop

Hit ctrl+A, ctrl+C. Create new file with size A4 with a resolution of 300 ppi. Hit ctrl+V to paste our text here.

Hit ctrl+I to invert text color to white. Click Layer|Convert to Smart Object. Hit ctrl+T. Rotate text.

Step 33

Create new layer under text. Add a radial gradient from black to white.

Step 34

Download grunge textures from deviantart. Paste it behind text.

Use blending mode Multiply with 65% opacity.

Step 35:

Return to our text layer. Click Layer|Layer Style|Drop Shadow. Use setting below.

Use this setting for the Outer Glow.

Conclusion

Yeah, we’re done!. As you can see, all techniques used here is just simple. You can learn it from a basic book on design and typography. What you really need here is just patience and lots of free time. Please share your opinions on the comment form. You can see the final image below or from this link.