Create Convincing Text-Shaped Buildings in Photoshop

Creating convincing buildings that appear like text in a cityscape can be a challenging task. In today’s tutorial we will learn how to create building-shaped typography in Photoshop using photos that you have taken yourself. Let’s get started!


Tutorial Assets

You may download the photos that were used in this tutorial for free from the link above.


Before You Begin

It is most fun to use your own photos for this tutorial. Feel free to use the ones provided, but you will feel much more satisfied when you use your own. If you decide you use your own, there are some things that you have to take into account. The first is to go to (one of the) highest building in a city with high rising buildings (more than 10 floors). Any capital in the world will do, except Amsterdam and Ouagadougou. Higher buildings are more spectacular. Take shots of complete buildings, of parts of buildings, take shots of streets, parks, pedestrians, cars, satellite dishes, antennas, rubbish baskets, take shots of everything you see. Zoom in to roofs and take shots of the small constructions on top, of laundry lines. You will be surprised how different things are on each roof. Use a reasonable zoom lens for some of the shots. When you start creating the image, you will get all kinds of ideas on small details and how to use them. Don’t be stingy with using your camera memory when you are on the roof; take loads of pictures.


Step 1- Nairobi Skyline

Create a white background image of 6000 x 6000. Save it as nairobifull.psd. Open Nairobi_skyline.jpg, copy it to Nairobifull, rename it to Nairobi background and drag this image as in the photo with the move tool (V). Make the horizon horizontal (turn it -2degrees or so) and drag it to the top of the working space, leaving the sky out of the image. Hit return (confirm).


Step 2 – Putting it in Perspective

Horizontal text is boring. So we want to put things in perspective. We are still in move tool mode, press Command/Ctrl, click the left corner of nairobi background and drag the photo down on the left side (see image) correct the horizon again so that it is above/out of the image, maybe you need to drag the left point somewhat further to the left, to correct the vertical direction of buildings. It is important that all building are vertical. Make sure there is space for the text below.


Step 3 – Level it Out

Go to image > adjustments > Levels, put the middle arrow to 75. If you use your own photos, you may want to wait with this till last. The colorization has to be in line with the front buildings.


Step 4 – Vanishing Points

Now it is time to put the direction of the letters/buildings in perspective: vanishing points. Create a new layer. Call it vanishing points. Draw a vertical line (use Shift and the pencil tool). Duplicate the layer. Select the move tool and rotate the line 90 degrees. Merge the layers. Duplicate the layers. Rotate one layer 45 degrees, merge. Do this another two to three times, (22.5 degrees, 11.25 degrees, I guess you grab the idea). You now have a wheel like the picture below. Duplicate it, put it in one layer group (layer > new > group from layers (both vanishing points layers selected). Put this layer group to 50-60% transparency. I got the idea of the vanishing points from a previous tutorial on this site by Narendra Keshkar who created a great banana ship tutorial that was published in September 2010. Without it, this image would have been impossible. Have a look if you want.


Step 5 – Vanishing Points in the Image

Use the move tool to enlarge the vanishing points layers 5 times or so. They have to be really much bigger than the canvas. Now starts one of the most important parts of the tutorial: put it in perspective. The lines of the vanishing points have to follow the perspective lines of the buildings. Move one vanishing point layer till it is done. It is easy to follow a floor in front of a vanishing point line. It has to be the same for the top floor as well as for the lower floor. When this is done correctly you can start with the next step: the text.


Step 6 – The Text

Select the text tool. Write SAFARI (or any other text) and enlarge the text so that it covers pretty much the white part of the canvas. Choose a simple font. Buildings made with Gothic or handwriting fonts are a bit more complicated than Arial if you know what I mean. Then right click the layer and rasterize the layer. Use the Command/Command/Ctrl + move tool to put things in perspective. Make sure the text follows the vanishing point lines nicely into the two directions, as seen in the photo below. Try to find a color that is very visible as font color; it will help with staying visible. Black is hard to see sometimes.


Step 7 – Organizing Group Layers

Duplicate the layer SAFARI, erase AFARI, so only the S survives. Select the layer and make a new layer group S building (layer > new > group from layers). This group is for the S building. Put all things for the building in that building. Use a similar way of organization for all the other buildings. Within the layer group, use other layer groups for walls, fences, roof shades and other things if need be. The tutorial may not mention all the layers used in the tutorial, but there is a lot of organization in such a file. It is important you can trace back a little thing within over 300 layers. Premium members can see the psd file with all the layer, layer groups and layer groups of layer groups.


Step 8 – Perspective to Square

Open the file Nyayo house.jpg and copy it into your Nairobifull in the S-building group as a new layer. Call the layer Nyayo house. There is a kind of diagonal way the floors move because of the perspective the photo is taken. This has to be corrected. Command/Ctrl and the move tool are of help. Pick the little right middle selection square and pull it a bit up, till the floors are horizontal. Confirm the distortion. Then use the rectangular marquee selection tool, select a part as large as possible, this will be the area you are going to use for creating the building. Inverse the selection and hit delete. During the selection, try to be careful with where you cut. Cutting through glass is not good since this will make the building look as if it is incomplete. Cut it in such a way that putting the same selection next to each other seems to make it seamless.


Step 9 – Wrap the First Wall

Copy the layer Nyayo house. Move the copied layer below the purple S. while in the move mode click on one of the corners. The wrap function appears. Click on it. This allows you to distort the layer the way you want. You want the layer to look like it is following the curve of the S. So make the edges higher, push the middle lower so that you get the impression the wall of the building is round. You should also try to make the middle windows wider and especially the ones on the right edge smaller so that you get the idea that they are really facing away.


Step 10 Wave the Second Wall

Continue with the next wall. Copy the original Nyayo house layer again, and wrap it in the middle of the S. Make sure it is below the first layer. This time it is like a wave. The process of wrapping needs quite some attention. You can accept the wrap and do it again to get a better result. Make sure the floors are in line with the edge of the roof.


Step 11- The Last Curve

The inside of the S top is also not complete yet. Duplicate your Nyayo house layer again, and cut the left half away so that the only part left that will be visible later. You only need three windows wide for this part. This way you have more control over the wrap.


Step 12 – Finalizing the S Walls

The last wall is the simplest. No wrap after duplication, use Command/Ctrl and draw the layer in perspective Make sure you have two windows on the edge. Select the rest and delete it. Now you should have an S standing out as a kind of building. Make the last Nyayo house invisible. You can delete it, but it makes life easier if it is invisible because you never know if you may become unhappy with one of the previous layers and you want to start from scratch. Now select all the nyayo house layers make a new group from layers and call it nyayo house walls.


Step 13 – Sourcing the Roof

Roofs are not smooth and purple. Time for texture and a better color. Open roof 1 and select a part of the roof with the polygonal lasso tool (L), copy it and put it in the Nairobifull file Under the S building. Rename the layer Roof


Step 14 – Put the Texture in Perspective

Stretch the layer so that it would be big enough to cover the entire purple S. Also put it in perspective. The roof textures has some lines, the lines should also more or less follow the vanishing point lines. You can use the same method as in step 8 followed by the same way as the text was put in the boxes, step 6. After that you may want to adjust the color a bit. Go to Image > adjustments > hue and saturation. I removed the green a bit, made it lighter and desaturate the color somewhat. The idea is to have a realistic color with the right brightness. Copy the layer once and make it the original invisible. We will use it again with building F.


Step 15 – Finalize the Roof

Move the roof layer on top of the purple layer. Command/Ctrl + click on the purple S layer (probably called safari copy). This selects all pixels in that layer. While the layer roof selected, inverse and delete. Now you have a roof on your building.


Step 16 – Safety First

It starts to look a bit like a building isn’t it? Time for details. We do not want our friends fall off the roof so a small wall at the edge needs to be made. Go to the roof photo again, cut out something out of the wall. Use the polygonal lasso tool like step 13. Copy it to Nairobifull > S-building group and rename it edge. Make it square like step 8.


Step 17 – Placing the Edges

Make a new layer group from edge and call it ‘edge of S’ or something like that. Move the edge layer to the group and copy it and start to make a fence or wall on the edge of the S. Use the wrap mode as explained in step 9. Copy the original edge layer again and continue to repeat with this till you have walls around the whole S that are visible from within the roof (see the image of step 18).


Step 18 – The Outside Edges

Now it is time to do the rest of the edges. The idea is that the edge of the inside has a different color than the outside. The inside should be yellow like parts of the rest of the building. So select the original edge again, open image > adjustments > hue and saturation and tick colorize, hue 45, saturation 33, lightness + 30. It should make the edge more or less yellow like the rest of the building. Now continue making edges like in step 17. Make the original edge and the original yellow edge invisible.


Step 19 – Shading

Now we have a kind of building, but it still looks like a computer 3D generated thing. Partly because the shades are missing. First think of how the shades should be. Look at the background image and look at the shadows. Where is the sun situated?
Make a new layer, call it shades S. Select the brush tool. Seize 1400, opacity 15, hardness 0%. Now we have to be careful with what we paint. The brush is too big for every detail and the a smaller brush is not an option because of the hardness. So we have to select wall by wall. Open the group Nyayo walls.
When you click Command/Ctrl and the icon of a layer, you select objects that are present in that layer.

When you hold Command/Ctrl + alt and you select another layer, the objects that are in the other layer are removed from the selection. This way you can quickly and precisely select and deselect what you want to paint (shade) at a go.

Select the wall as seen in the image below (Command/Ctrl and select the layer called nyayo house copy and Command/Ctrl + Alt on the roof icon, in case there is overlap Command/Ctrl + Alt will remove the layer you click on. Command/Ctrl + Shift will add a new layer). Paint once over the area right of the middle, a bit more on the middle and several times on the left. The result should be a nice shade on the left side. Paint vertically. If you are not happy with it, you can always throw the layer and start a fresh. Now repeat this step for each nyayo house wall. Once you are done with the walls, you have to do the edges.


Step 20 The A-Building

You know the drill: copy the SAFARI layer you made with step 6. Erase S and FARI. Select the layer and make a new group from layers. Make sure the group called S (which should be all the layers that are making the S building) is collapsed. Now select the groups S and A. Make a new groups from layers called Safaritext.
From now on, create each new letter in a new layer group. As said before, you may find that the hardest part of this work is the organization. Proper organization saves time. Make sure layers have either a sensible name or they are in a group that has a sensible name (preferably both). It is a waste of time if you have to go through more than a hundred layers to fine a stupid lose window or satellite dish which is not correctly placed. Use layer groups, sub groups and sub sub groups and go on if need be.


Step 21 – The Building’s Main Wall

Open Building A.jpg and select the front of the building with the polygonal lasso tool. Copy it and paste it in Nairobifull. Use the same techniques as in step 6 to make it square.


Step 22 – Adding Floors

Now we are facing a slight problem. We were able to select about 6 stories of building in the previous step. And if you check the white building behind the place for F, you can count 10 stories. So we have to add some stories to our version. Copy the layer and move the top layer a bit in such a way that it looks like you have ten stories. Merge the layers. Call the m A-wall and make a new layer group A-Wall. This is the time to change hue/saturation if you want.


Step 23 Placing the wall

Now we duplicate A-Wall, and paste it alongside the A, the same way we did it with the S but for now we do not suffer from the curve, so now wrapping, just Command/Ctrl + click a corner in move mode and make it go nicely. Make sure there is a small perspective in the layer, since the stories near the top of the A are of course closer to each other than the bottom.


Step 24 Two Front Walls

As you can see in the final image, the legs of the A have one floor less than the rest of the building. I did this because no building is the same, some are boring like a block (the I in safari is a good example) and some are more interesting. It makes the image alive. But if you use your won text; be careful not to exaggerate the things. It has to stay readable.

So the first thing to do is to see how the lower story works. The wall placed in the previous sample has to be cut out a bit. It starts at the beginning of the leg. One story. Select the place with the polygonal lasso tool, and select what needs to be cut out. Go to layer > layer mask > hide selection. This way you delete the piece but you can paint it back if needed. I used layer mask for all the walls of the A building since it allows me to fine tune everything.

Now select A wall again, duplicate it and this time paste it on the base of the A as if A is a triangle, this wall is the base of the triangle. Remove the top story and remove the stories between the legs with the help of the layer mask (red indicated). You can do this by new layer mask, reveal all and then select the red area with the polygonal lasso tool. Then use black with paint bucket tool while the mask is selected. If you want to fine tune it later: it is a layer mask, paint white what you want to see, paint black what you want to hide.


Step 25 The Third Front Wall

We need the second base of the A, the wall that comes at the center and has one extra floor compared to the legs. Duplicate A wall again, make the red disappear with the layer mask.


Step 26 – The Last Wall

The wall that comes within the hole in A and is part of the right leg is the last wall that needs to be made. It basically uses the same steps as before. The red part is the part that needs to be removed.


Step 27 – Roof Sourcing

Now it is time for the roof. Open Roof2.jpg and select the roof. Past it in Nairobifull and make it square. Duplicate the layer and put the layers next to each other, stretch them a bit so that they are a big square.


Step 28 Top and Lower Roofs

Put the roof in perspective. Use the grid cells as a guide. Crtl and click on the purple A (SAFARI) layer, go to layer > new layer mask > reveal selection. Note that this makes the roof for the top part of the building ok, however the two legs of the A are out of perspective. Remove the two lower parts (black brush on the layer mask), select the area that should have a roof (polygonal lasso) and use the paint bucket tool to fill it up with white (visible).


Step 29 – Shade

Time for shading again. Do the same as in step 19. Black brush opacity about 15, Seize 1400 and hardness 0%. This time there is no half shade at the left wall. Only the base of the small triangle has a border of shade and not shade. Don’t forget to make the purple A invisible, it looks quite ugly if you forget it as you can see below


Step 30 – Fencing Off

Paint/draw a fence. Many ways to do it. If you have your own photos you may be able to cut one out. For this tutorial do the following: draw two horizontal lines in a brown color, used innershadow, layer draw some vertical lines, also innershadow. Black spots on the bottom and merged the two layers. Actually I think the inner glow and the spots are over the top since the fences are hardly visible. Call the layer fenceA and start copying and than in a new moving the fences all around your building edges. When finished select all fence layers and group them. After that, make sure you group all A related layers in the A layer. Building A is done.


Step 31

Now you are going to get a repetition of previous things. Duplicate the SAFARI layer again, make sure that the F is the only one left. And make a new group of layers called F.


Step 32 – The F side Wall

Open building F.jpg. repeat step 8 and 23. This will be the wall alongside F. Open roof 2 and cut out this part of the wall that can function as a vertical other wall, the bottom of F (I love the part where some tiles seem to have fallen from the wall, will make our result more realistic). Repeat step 8 again open hue and saturation. Put hue + 16, saturation -66 and lightness -10. Repeat step 23 with the wall.


Step 33 – The F Roof

Remember at step 14 we left a copy of the roof invisible. Grab it and use it to finish the roof of the first part of the F building. Make sure you change the color a little bit with hue and saturation (changing the hue is enough).


Step 34 – The Two Towers

Create two new layer groups within the F layer group, call one top tower left, the other top tower right. Make sure they are above the roof layer. Start creating the walls and roof of the towers the same way as the previous part of the building. However when you create the layers indicated in red, you have to move them out of the top tower group and move them to below the roof layer.


Step 35 Finalizing F

After finalizing the towers the building is as good as done. Just create some walls to prevent your virtual friends from falling, like the S building (now only no wrap is required) and put shades again. The only new shade is the one from the right tower on the roof. Use polygon lasso tool to select the area of shade. Use the black paint bucket tool to fill the area and change the opacity of the layer to 45%. F is done.


Step 36 – A2

3 down, 3 to go. The further away and the smaller the buildings, the fewer details are necessary. This is partly because the buildings are smaller, partly because they are less eye catching but also because more complex accessories or extra shapes make the letters less visible. Therefore a simplified A could also do the trick. Just two legs, without the horizontal connection down. For the coming step open townhall.jpg and building A2. Use step 8 to make everything nicely square. From there, try to create the main wall as you see it in the image below, so cut out several floors of building A2, duplicate them and put one floor of the white floor of the town hall in between. Merge the layers. Duplicate it and you can have two walls for your second A building.


Step 37 – A2 Finalizing

After you placed the walls, you can use the roof from building S or F. Just use hue and saturation to change the color a bit if you like. Open times tower.jpg. Use the polygonal lasso tool again to select a piece of the building. Use brightness + 70, contrast + 60 to make the tiles a bit more visible. Now you have a nice wall for the bottom of the legs of the A. Duplicate the layer, then paste it with the move tool nicely on the bottom. Add an edge the same way as the F building, shadow as well. A2 is finished.


Step 38 – R MainWall

R is a bit of a more complex building. There are some round parts, the two legs. Following the purple letter may be a bit tricky. The two legs do not have to come together with a curve. You can make it come together like the previous A, in a corner. Than the R does not have to be round, you can make it with corners.

Before we get to this, lets first make the main wall. Open Rbuilding.jpg use the polygonal lasso to cut out the square as good as possible and paste it into Nairobifull. As with the A building, also this building has an element of another building in it. So open Rtopridge.jpg. On the left you see a white building with thin vertical windows. Cut one floor out and merge it with the other piece you cut out of Rbuilding.jpg. Merge the layers and use hue/saturation to give it a bit of color while you have the colorize box checked. Duplicate the layer 6 times.


Step 39 – The Lower Roof

Time for the roof. Since this building is a bit playful, it would also be nice to add an extra floor to the top of the R part. So the legs are a bit lower. Get the roof F or S again, duplicate it and colorize it like the previous step. When this is done, start thinking how the roof is going to follow the purple R. Make your life easier by avoiding round corners. Use layer mask with cutting the things out. With layer mask you can always correct what went wrong. Put also the first wall against the roof. After that use 3 of the duplications for the other walls.


Step 40 – The Higher Roof

Make the top roof of the R building, one extra floor. Use the wall layers that have not been used yet for the two walls you need for the top floor. Than fence the roof, like you did with building A. Create Shades.


Step 41 – I Building

Let us see the work in perspective now. Make the SAFARI layer visible again. You can see that F looks a bit funny but if one would look straight up it should be ok. That is the idea behind this work. The I would also be acceptable if we used the original I of the Safari layer, however it would disappear behind the R (because of the extra floor). To solve this, we simply make the building higher.
Open building A2 again. This time we select the part that makes the staircase (the part on the left that is glass only). Select it, make it square and multiply the layer a few times and put it next to each other. Merge the layer. Now we have a glass like wall. Fix the front wall, fix the roof and don’t forget the shade. Now you have your safari ready. And there are still quite a lot of things that need to be done.


Step 42 – The Street Cut Out

It is to fill up the space in front of the buildings. And in front of almost any building there is a street. When going through the photos, there doesn’t seem to be any reasonable street photo because all photo’s where the street goes in a diagonal direction, buildings or trees were in the way. So we need a photo where the street is more visible (vertical) and make it more diagonal. Open street.jpg and cut out part of the street as indicated below.


Step 43 – The Street in Perspective

Paste the text in Nairobifull (call it street) and go to edit > transform > flip horizontal. After that use the Command/Ctrl and move tool to put more perspective in it. Accept the transform. Make sure the street is not completely against the buildings. Duplicate the street layer. Move the new layer up-right and make it a bit smaller so that it looks as if the street continues till it is out of the photo.


Step 44 – The Last Building

Before we really fill up the rest of the picture, it is time for the last main building. This is quite an important element in the photo. This building has a diagonal roof, but it can really be anything. Details will be very important if you decide that the roof should be flat.
Open townhall.jpg. Cut out a white floor with 2 grey stories below. Copy them into Nairobifull.jpg and put them in perspective.


Step 45 Creating the Delta

Create a new layer, call it delta. Select a triangle above the left wall as seen below. Fill it with white. Now this is of course too white. Select the round brush, put opacity to 15% or so, seize 800 and move it once over the entire triangle and now start brushing with the edges to the top, so that you get a kind of shade. Open the citycouncilogo.jpg. Go to select > color range. Click on any white part in the photo. Inverse selection. Copy and paste it in Nairobifull. The logo is already a bit in perspective, but you may want to make it more in perspective through Command/Ctrl and move tool.


Step 46 – The Roof

Go back to townhall.jpg and cut out the orange roof. Duplicate the layer. Fix the roof on the building we are working on. After that, put some shades on the front wall Also the left top side roof should have a little bit of shade.


Step 47 – The Park

The last major element: the park/market. Open Park.jpg. Use the quick selection tool to select the park itself. The reason for the quick selection tool is that the edge (top part next to the street) is rough, and trees should be the edge. Paste it into Nairobifull and move/transform it in such a way the trees fall a bit over the road and the park looks placed just next to the road, coming from underneath the front building.


Step 48 – Cut the Trees

Read step 49 before you really start with this one.
Now it is time to eliminate all the white. Go back to Park.jpg. Cut out a green piece (quick selection will do). Copy-paste it into Nairobifull. Move it to a white space between the road and the buildings. Duplicate the layer, turn it randomly, move it to some other place. Duplicate again, make it bigger or smaller, or squeeze it, whatever, move it to another white space, repeat a few times. Go back to park.jpg. Select another tree or bush, do the same. Continue till all the white places are filled up. 30 to 50 layers will do. Don’t forget to put all the layers in one layer group.


Step 49 – Pedestrians

There are two places where filling everything with green would be too much. So some pedestrians are welcome here. Cut them out of the park picture (or another one) and paste them there. Make sure the trees are overlapping the edges of the cuts, so they fill in naturally.


Step 50 – Making the Green Green

You will see the trees you cut from the park can have quite a different color, the aim is to make the differences a bit smaller. Duplicate the layer with the trees and merge the layer. Put the opacity to 50%. Open hue/saturation. Have colorize checked. Hue 95%, saturation 26%, lightness -20. Now we are done! Let’s zoom out and look at the result.


Step 51

If I look at the result everything looks clean. Too clean. Have a look at the pictures we worked on before, the originals. The big difference is that those buildings are messy. Satellite dishes, small constructions, rubbish, graffiti, whatever makes it……human! So the next step is to create some small top buildings. Open roofbuilding.jpg. You see a kind of small building Cut out the roof and the front. Paste it into Nariobifull.


Step 52 – Roof Structure

Change the shape of the roof and the front building as done before (Command/Ctrl + move tool). Select the part of the wall without window, copy it into a new layer and paste it as the left wall. Now make a new layer under the three layers, call it shade. Use polygonal lasso to draw the shade as you think should be done. Fill it with black. Change the opacity of the layer to 60%. Shade is ready. Select all four layers and group it in a layer group called roofthing (or find a more original name).


Step 53 – More Roof Structures

Copy the roofthing layer a few times, and spread them on the S-building. The buildings in front should be a bit bigger than the ones further away. If you use the move tool while the group is selected, the group behaves like one layer. Make another copy of your roof building, move it to F. If you want you can change the shape a bit. Make it a bit longer, also create windows on the left side. By now it must be very clear how to do that. Then open roof1.jpg again. Select the roof thing on the left side, flip it horizontal, create shade, make a group and paste it a few times on the A2 building. Open Roof-R.jpg. Cut out the structure that is highest and paste it on top of the R-building. Flip horizontal to make the shade match. Draw a shade under it. You may what to make it a bit lighter and increase the contrast. Select both the shade and the roof thing itself and put it in one group called R-roofthing or something like that.


Step 54 – More Awesome Roof Structures

Copy the R-roofthing layer and move the copy to A. Make it higher, squeeze it a bit so that the perspective is a bit better. Also do the same thing to the shade. Make the color a bit different (hue/saturation), play with the lightness so that it is convincing that it could be there.
Open building A2 again. You find some funny looking things on the roof there. Perfect to put on the A building. Cut them out, paste them on the A building, change the perspective a bit. Now the small rooftop buildings are more or less finished. However if you want more, please continue, the more the better.


Step 55 – Dishes and Antennas

What are we still missing? Satellite dishes! They make or break the image, for real! Open Satelite dishes.jpg. The dish you see is not a very modern one (build in the seventies) but it will do. Cut it out, paste it in Nairobifull.jpg. Copy it at least 10 times. You can change the shape and seize every time. In some cases make it darker. Make a new layer under it, call it shade. Use a brush with 15% opacity and hardness 0%.
Another thing that is typical is the amount of antennas. Grab building A2.jpg again and get a nice rusty pole. Copy and resize it about 30 times and put it in an equal amount of places. Almost done.


Step 56 – Signing Off

What is a city without graffiti? I think those do not exist. Many of the guys put their names at as many places as possible, and this is your town, so you can put your name everywhere. Go to Dafont.com and search for a nice graffiti font (don’t forget to give credit if the author asks for it). Put it where you want and maybe you need to distort it a bit (Command/Ctrl + move tool). You can use outerglow black to make lines thicker if needed. If you want to squeeze it, you need to rasterize it first. Put the opacity of each text to 60% in the shade and 75% in the sun. Congrats; your image is ready.


Conclusion

The photos I used were made with my first (and current) SLR camera, a Canon 350d with about 5 megapixels. Not a great camera, the lens I used was a Tamron 38-300. Some pictures with details are not too great because of keeping the lens steady/large exposure time. It was a sunny day in Nairobi so I still got a reasonable amount of light in the lens. Despite the fact that the photos were not excellent, the result can be quite ok.

Is my final image perfect? I don’t think so. Not all the shades are perfect, I may have put some fences together wrongly; forgot some shades etc. However the objective is to make something that looks realistic. I wanted to fool my friends. I don’t want to (I actually mean I can not) fool an experienced photo shopper. The result was somewhat in between, as you may see from the reactions on the photo on my flickr page.

Realism is best realized by paying a lot of attention to the first buildings, S and A. F is also important but not so much. The front building should also look ok. Realism is details. Satellite dishes, laundry lines, dirt, graffiti, you name it. Pay attention to this and it really pays off. I also created a story with the image which you can find on my flickr page. That can also help.
It is funny how a logo can make people believe they know the building but the real building looks completely different. People usually do not look up while walking in a familiar place. Do you know how your favorite fashion store looks above the first floor? What if you saw a photo and someone photoshopped something different on top? Would you notice?

You can really create your own reality with this work.
What should you write in a city? Your own name? EAT ME in the Big Apple? PETER in St Petersburg? While I was making the tutorial, I thought: why did Khadaffi and Saddam Hussein not create their names of building in their cities. These buildings are definitely harder to pull down than their statues.

If you decide to follow the tutorial, it would be nice if you could post a link to your final result, especially if you use your own photos. A really final thought: I always see a tutorial as a recipe in a cooking book: use it for inspiration and some tips, but do not forget to put a personal touch in it. Have fun!

Robbert van der Steeg


Best of the Web – October 2011

As you know, each month, we round up some of the best Photoshop-related content from around the web. This month, there were some excellent Photoshop tutorials and freebies to choose from so please take a moment to review our favorites from October 2011.


Photoshop Tutorials

  • Create a Light Textured Web Design in Photoshop

    This tutorial from Design Instruct will explain how to create a textured web design in Photoshop.

    Visit Tutorial

  • Create a Glowing Superhero

    This tutorial from frequent Psdtuts author, Kervin Brisseaux will show how he created a glowing superhero illustration in Photoshop.

    Visit Tutorial

  • Ctrl+Paint Unplugged: Introducing the Pencil

    This video tutorial from Ctrl+Paint will explain how to hold your pencil when you are drawing your illustrations.

    Visit Tutorial

  • Photoshop Hidden Gem: Automated Lens Correction

    In this tutorial, Photoshop Senior Product Manager Bryan O’Neil Hughes shares how common lens artifacts like distortion, chromatic aberration and vignetting can be easily corrected with Photoshop CS5.

    Visit Tutorial

  • Ask Dave Podcast: Get Square Corners on a Stroke That’s Outside (Rather Than Inside)

    Let’s be honest, Photoshop does not handle strokes very well. This tutorial from Dave Cross explains how you can tweak Photoshop to produce square cornered strokes that appear outside your shapes.

    Visit Tutorial

  • How To Create Repeating Texture & Pattern Images

    This tutorial from Line25 will explain how to create repeating textures and patterns in Photoshop. A great tip for anyone who works in web design.

    Visit Tutorial

  • The Quick Change Artist

    This tutorial from The Digital Photography Connection will explain how to alter the color of a woman’s outfit in Photoshop.

    Visit Tutorial

  • Flaming Car in Photoshop

    This tutorial from Abduzeedo will explain how to create a flaming car in Photoshop.

    Visit Tutorial

  • Design a Dark, Moody Movie Poster

    This tutorial from Psd Fan will explain how to create a dark movie poster in Photoshop.

    Visit Article

  • Create a Leatherback Book Icon in Photoshop

    This tutorial from PhotoshopTutorials.ws will explain how to create a leatherback book icon in Photoshop.

    Visit Article

  • How to Develop a Handmade Illustration with Photoshop

    This tutorial from Design Instruct will explain how to create a hand-drawn illustration from a photo in Photoshop.

    Visit Article

  • Create a Typography Based Blog Design in Photoshop

    This tutorial from Line25 will explain how to create a basic, text-based blog layout with Photoshop.

    Visit Article


Articles and Freebies

  • Hyperrealistic Teenage Mutant Ninja Turtles by Dave Rapoza

    This article on Abduzeedo features some amazingly life-like Teenage Mutant Ninja Tutorials by Dave Rapoza.

    Visit Article

  • 15 Free Vintage and Stained Paper Textures

    This collection from Lost and Taken includes some fantastic vintage stained paper textures.

    Visit Article

  • Illustration Inspiration for the Weekend

    This round up from Noupe showcases some excellent illustrations for your inspiration.

    Visit Article

  • Amazing Tribute Artwork: Remembering Steve Jobs 1955-2011

    This tribute of Steve Jobs on DesignM.ag includes some touching illustrations and photographs that honor a man who contributed so much to the world.

    Visit Article


Design Inspiration: Pink Websites

In recent weeks and months we’ve published several posts dedicated to helping with color inspiration for web designers. Today we’ll take a look at websites that make heavy use of pink in their color scheme. Pink is sometimes associated with femininity, but as you can see from the sites showcased here that is not always the case.

You may also be interested in:

Odopod

Odopod

designPINK

designPINK

Aztrolab

Aztrolab

The Fashion Sketchpad

The Fashion Sketchpad

Motionoto

Motionoto

Formee

Formee

Winestore

Winestore

Confidence Coalition

Confidence Coalition

Wheels & Doll Baby

Wheels & Doll Baby

Lucid, Inc.

Lucid, Inc.

Docteur Chantale Bourdon

Docteur Chantale Bourdon

Solid Giant

Solid Giant

The Social Agency

The Social Agency

Fair & Lovely

Fair & Lovely

Pink Feet Photography

Pink Feet Photography

Seventhsin

Seventhsin

Heather the Realtor

Heather the Realtor

Sarah Hyland

Sarah Hyland

We Shoot Bottles

We Shoot Bottles

The Little Cake Parlour

The Little Cake Parlour

MustGetaCard.com

MustGetaCard.com

Tickled Pink

Tickled Pink

OUOU

OUOU

Design Code Play

Design Code Play

Love Hunt

Love Hunt

For more design inspiration please see:

Royalty-Free Graphics

Photo Effects Week: Create a Planet Using Photoshop’s 3D Capabilities

This week we are celebrating the launch of PhotoDune, Envato’s new stock photography website with a series of photo effect and photo manipulation tutorials that showcase the images from our new marketplace. The 3D tools in Photoshop CS5 Extended make it easy for anyone to add 3D elements to their images. In this tutorial you will create a planet using a 3D Sphere, and utilize the new Repousse feature to extrude objects in 3D space. Let’s get started!


Tutorial Assets

The following assets were used during the production of this tutorial. Unfortunately, the PhotoDune author did not respond to our request to distribute their image to our premium members but any rocky or grungy texture should do.



Photo Effects Week: Use Curves Adjustment to Turn Day Into Night

This week we are celebrating the launch of PhotoDune, Envato’s new stock photography website with a series of photo effect and photo manipulation tutorials that showcase the images from our new marketplace. Adjustment layers are a powerful feature in Photoshop. They prove their usefulness time and time again. In this tutorial you will use a Curves Adjustment layer and additional techniques to change a scene from day to night. Let’s get started!


Tutorial Assets

The following assets were used during the production of this tutorial. We have granted a complimentary personal license for some of the assets to Psd Premium Members for the stock photos used in this tutorial. The images can only be used for the purpose of this tutorial and they can be accessed in the source files of your premium download. If you are not a premium member, you can download the images used in this tutorial below.



31 Creative Business Card Designs for Your Inspiration

We’ve already posted quite a number of business card collections in this blog. But with designers actively coming up with innovative designs, we make it a point to provide you with fresh ideas as often as we can. Majority of the samples we’ve included in this new collection were released by designers from various design portfolio sites just this October and September. Since so many business card samples were uploaded in such a short period, we’ve chosen to include only 31 of the most creative designs of the batch.

With the new year fast approaching, you may want to start contemplating changes on your business card’s design . Checkout this collection of  very attractive standard business cards and die-cut business cards to get some much needed inspiration.

 

Wooden Business Card

Creative-Business-Card-Designs-01

Nick Tryer
View Source

 

Sound Designer Card

Creative-Business-Card-Designs-02

Johannes Klotz
View Source

 

Optical Illusion Card

Creative-Business-Card-Designs-03

Youngha Park
View Source

 

‘Invisible’ Business Card

Creative-Business-Card-Designs-04

Estudio Invisible
View Source

 

Casino Style Business Card

Creative-Business-Card-Designs-05

Activa Media
View Source

 

Luxury Business Card

Creative-Business-Card-Designs-06

Luxury Business Card
View Source

 

Plastic Business Cards

Creative-Business-Card-Designs-07

Frantisek Krivda
View Source

 

Seed Paper Business Cards

Creative-Business-Card-Designs-08

Aster Avenue Inc.
View Source

 

Black & White Cards

Creative-Business-Card-Designs-09

Ruwedata
View Source

 

Pachica Paper Cards

Creative-Business-Card-Designs-10

Pata Pri
View Source

 

Razor’s Edge Business Card

Creative-Business-Card-Designs-11

Taste of Ink
View Source

 

Soho Cafe & Bakery

Creative-Business-Card-Designs-12

Jason Silvers
View Source

 

GREENPAC Identity Card

Creative-Business-Card-Designs-13

GreenPac Design Team
View Source

 

Erik Brandt Letterpress

Creative-Business-Card-Designs-14

Elegant Press
View Source

 

Mais Pilates

Creative-Business-Card-Designs-15

MarketData Direct & Digital
View Source

 

Junpiter Football

Creative-Business-Card-Designs-16

Bravo Company
View Source

 

Business Card for: Brent Clowater

Creative-Business-Card-Designs-17

Brent Clowater
View Source

 

Business Card for: Javier Garcia

Creative-Business-Card-Designs-18

Javier Garcia
View Source

 

Business Card for: David Caval

Creative-Business-Card-Designs-19

David Caval
View Source

 

Business Card for: AppWare

Creative-Business-Card-Designs-20

Richard Eaton
View Source

 

Business Card for: Common

Creative-Business-Card-Designs-21

Erik Cox
View Source

 

Making Business Cards

Creative-Business-Card-Designs-22

Nancy Heathman
View Source

 

Title

Creative-Business-Card-Designs-23

 

Creative-Business-Card-Designs-24

Kristina Plummer
View Source

 

LETTERPRESS BUSINESS CARDS

Creative-Business-Card-Designs-25

 

Creative-Business-Card-Designs-26

Juan Madrigal
View Source

 

Piotr Kierat ID

Creative-Business-Card-Designs-27

Nina Gregier
View Source

 

•• NEW •• Judy Wainwright

Creative-Business-Card-Designs-28

G-Man
View Source

 

Business Card Design: Pediatric ID Society

Creative-Business-Card-Designs-29

RM Harrison
View Source

 

WHBV Business Cards

Creative-Business-Card-Designs-30

 

Creative-Business-Card-Designs-31

Jason Snell
View Source

 

sweet
View Source

 

ATOMICvibe
View Source

 

Andrew Sithimorada
View Source

 

Imagen Institucional

Creative-Business-Card-Designs-35

Dimol Group
View Source

 

Personal Branding | Letterpress Business Cards

Creative-Business-Card-Designs-36

Virginia Faircloth
View Source

Photo Effects Week: Apply a Color Effect to a Photo

This week we are celebrating the launch of PhotoDune, Envato’s new stock photography website with a series of photo effect and photo manipulation tutorials that showcase the images from our new marketplace. In this tutorial we will learn how to apply a color effect to a photo. The photo used in this tutorial is available for free for Psd Premium Members. Let’s get started!


Tutorial Assets

The following photo was used during the production of this tutorial. We have granted a complimentary personal license to Psd Premium Members for the stock photos used in this tutorial. They can be accessed in the source files of your premium download. If you are not a premium member, you can download the images used in this tutorial below.


Step 1

Open your image with Photoshop.


Step 2

Duplicate the image layer and apply an Unsharp Mask by going to Filter > Sharpen > Unsharp Mask. Apply the following settings: Amount: 100, Radius: 1.0, Threshold: 0. Layer should be set to Normal at 100% opacity.


Step 3

Now we have the image sharpened, but we only want our subject in focus, so let’s make a layer mask and paint in some places to add depth and remove the sharpen.


Step 4

Now let’s work on the lights and shadows of our characters, raising the level of these to get more dramatic and more interesting effect. To do this we will go to New Layer > Image > Apply Image and press OK with the default settings.


Step 5

Use the Dodge and Burn tools to highlight the lights and shadows of our subjects. When you are finished, set the opacity of the layer to 40%.


Step 6

Go to Layer > New Adjustment Layer and apply a gradient map from black to white. Set the opacity to 30%. With the pen tool, draw a mask as shown so that the gradient map only applies to our characters.


Step 7

Let’s start working the color, create a new adjustment layer of Curves and we are going to work in the Blue channel instead the RGB one. My settings are the ones in the picture, but do not be afraid to change it until you are happy with the result. This layer is in normal mode at 100% of opacity


Step 8

Add another Gradient Map from Black to White to slightly lower the saturation of the previous curves. The layer will be in normal mode at 40% of opacity.


Step 9

To keep playing with the colors we are going to add a Photo Filter by going to Layer > New Adjustment Layer > Photo Filter. Apply the Underwater filter at 25% density. Set the layer to 20% opacity.


Step 10

Go to Layer > New Adjustment Layer > Photo Filter > Warming Filter (85) at 25% density. Set the layer to 60% opacity.


Step 11

Go to Layer > New Adjustment Layer > Hue/Saturation and adjust the saturation to +11. Set the layer to normal at 100% opacity.


Step 12

Go to Layer > New Adjustment Layer > Curves. Select the blue channel and set the parameters as shown or until you are happy with the result.


Step 13

Go to Layer > New Adjustment Layer > Gradient Map and apply a Violet to Orange in Light mode at 10% opacity.


Step 14

Go to Layer > New Adjustment Layer > Hue/Saturation. Adjust the lightness to +5. Set the layer mode to normal at 100% opacity.


Step 15

Go to Layer > New Adjustment Layer > Gradient Map and add a new gradient map from black to white. Set it to soft light mode at 16% opacity.


Final Image


Photo Effects Week: Create a Print-Ready Environmental Poster – Psd Premium Tutorial

This week we are celebrating the launch of PhotoDune, Envato’s new stock photography website with a series of photo effect and photo manipulation tutorials that showcase the images from our new marketplace. In this Psd Premium tutorial, author Mark Mayers will walk you through the entire process of creating a poster design with a strong environmental message. You’ll use Photoshop to assemble the illustration, then add the text and graphics with InDesign to produce error-free artwork. Many of the photos used in this tutorial are available for free to Psd Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!


About the Author

Author Mark Mayers is a talented designer and illustrator from the UK. He has worked as a designer and creative director for several design/advertising agencies and specializes in print, branding, packaging, and exhibition graphics. Mark began his career when the tools of the trade were markers, layout pads, and most importantly, the ability to draw, but he embraced the digital revolution in the early 90′s and swapped his drawing board for a Mac. Today, Mark freelances from his studio in Cornwall for such clients as American Express, BMW, Future Publishing, IDG Communications and Imagine Publishing.


Professional and Detailed Instructions Inside

Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.


Final Image


Get Instant Access to Tuts+ Premium

Joining Tuts+ Premium will get you instant access to this tutorial as well as all the premium content in our archives. In addition, you’ll have access to all the source files for all of our free and premium content. You will also have free access to the premium content of all the other sites in the Tuts+ Network. If you’re already a premium member, Log in and download the tutorial. Otherwise, you can Join Today!


Fantastic Prizes Up for Grabs in the Tuts+ Survey!

We love the community of readers we have at Tuts+ and your opinion is incredibly valuable. This week, we’re giving you the chance to have your say about Tuts+, and win a few fantastic prizes at the same time! Read on to find out how to get involved and stand a chance of winning a copy of Adobe Creative Suite…


The Prizes!

We have a few fantastic prizes up for grabs, and the winning entries will be chosen at random when the survey closes in one week. Here’s what you stand a chance of winning:


1st Prize: 1 x Adobe Creative Suite 5.5 Web Premium

This prize has been kindly donated by Business Catalyst. Adobe Creative Suite 5.5 Web Premium software provides everything you need to create and deliver standards-based websites with HTML5, jQuery Mobile, and CSS3 support. Design immersive digital experiences and apps across desktops, smartphones, tablets, and televisions.

You’ll find plenty of incredible software inside, including Photoshop CS5 Extended, Illustrator CS5, Flash Professional CS5.5, Dreamweaver CS5.5, and Fireworks CS5. It’s the perfect accompaniment to everything we teach at Tuts+!


Runner-Up Prize: 4 x Six Month Tuts+ Premium Memberships

Four lucky runners up will receive a six month subscription to our Tuts+ Premium membership programme, completely free of charge! This is a brilliant way to expand your knowledge in different creative areas, and access a regular selection of incredibly high-quality tutorials and resources. You’ll be a pro in no time!


Competition Sponsored by Business Catalyst

Business Catalyst is a Adobe’s new hosted service for building business websites, replacing 5+ separate tools with one integrated solution.

Incorporating web hosting, content management, eCommerce features, email marketing and built in customer management tools, Business Catalyst can help you accelerate your projects and increase your profit margins. Try it out for free at businesscatalyst.com.


Complete the Survey

It just takes a few minutes to complete the survey, and we really value your opinion. We’ll be using the information from our readers to make the Tuts+ network better than ever, so this is your opportunity to let us know what you’d like to see change on the sites!

Take the Survey & Enter the Competition


Competition Rules

  • Please don’t enter more than once – if you do, none of your entries will count.
  • The winners will be picked randomly and contacted by email.
  • The competition closes in exactly one week. Any entries after that time period won’t count.
  • We’d love to hear your honest feedback, so feel free to say exactly what you think!

Thanks for taking the time to share your thoughts about the Tuts+ network. We really appreciate it, and look forward to hearing what you have to say!


Tips for Using Design Freebies to Promote Yourself

An increasing number of web and graphic designers are turning to free resources in effort to promote their services and products. In an industry that can be highly competitive any means of standing out and gaining exposure can go a long way. The method of gaining exposure from freebies is being used by designers for promoting their services for clients, as well as for promoting their own products, such as WordPress themes and PSD files. A few months ago we looked at some real world examples in Designers Using Freebies to Grow Their Business, and today we’ll explore the topic further by providing some tips for those who would like to try this method for themselves.

The freebie promotional method includes a great deal of flexibility, so it can be used by designers and developers in a number of different ways. As was already mentioned, freebies can be used to gain exposure in attempt to land more client work or to sell more files and resources. In addition, freebies can be distributed from your existing website or blog, from a website or blog owned by someone else, or you can set up a site specifically for distributing freebies. We’ve all seen freebies being distributed from blogs, but an example of a site whose primary function is distributing freebies is Allur. They also sell WordPress themes, which the freebies help to promote.

We have some experience of our own using freebies on this blog as well as on many other design blogs, mostly to promote our design resource membership site, Vandelay Premier. The post is written based on our own experience, observing what other designers are doing, and from talking to other designers about their experiences with freebies.

Have a Plan

Giving away resources like PSD files, Photoshop brushes, vectors, icons, and textures is a great way to gain some exposure and subtly promote your other products and services, but in order to make it work you’ll need a plan. Do you want to use freebies in effort to land client work, or do you want to use freebies to promote premium resources that other designers can purchase?

You’ll also want to consider whether you want to release the freebies on you own existing website or blog, on sites or blogs own by others, or if you want to establish a site specifically for distributing the freebies. Creating a dedicated site will require the most time and effort and is probably only a good idea if you plan to spend considerable time on freebies going forward or to build up a large collection of free resources.

Whether your ultimate purpose is to find client work or sell premium resources to designers you should consider what freebies to release and how they relate to your products and services. For example, at Premium Pixels designer Orman Clark has given away free PSD files for website layouts. Those resources can be downloaded for free and coded versions are available as WordPress themes at ThemeForest. So the freebie is great at attracting interest and anyone who wants to use it on WordPress can get the theme and save themselves the time and effort of coding it.

Not all freebies will promote your premium products this well, but it’s a good idea to release freebies that will appeal to the same specific audience as your products or services, and if you can form a natural flow from the free resources to your products or services it will have a better chance of being a successful promotional method.

Focus on Quality Over Quantity

Although freebies aren’t going to directly earn money for you, it’s still in your best interest to invest the time and effort to makes sure the quality is high. Those who download the resources will likely judge the quality of your products and services based on the quality of your freebies. If the free resources prove to be useful to them and you have other premium products available they will be more likely to consider making a purchase. If you’re a service provider, high-quality freebies will show potential clients the type of work that you are capable of producing for them.

Consider Using Freebies to Build a List

If you’re giving away resources to designers you may want to consider building a list while you’re at it. The list could be either a separate mailing list that you ask people to subscribe to in return for getting the free resources, or the list could be a subscription for updating people when new free and/or premium resources are available. Either way, the list will allow you to gain more exposure and reach more people on a repeat basis.

For example, Allur uses a modal popup to encourage visitors to subscribe to be notified when new resources are released.

Allur popup

Another example is from this blog. At the bottom of each post we have a promotion that offers a bundle of free vectors and icons for anyone who subscribes to our mailing list. It has proven to be a helpful method for promoting our mailing list and communicating with subscribers on a regular basis.

Popular Blogs Provide A Great Platform

There are hundreds of thousands of people out there who regularly read and subscribe to design blogs. The leading web and graphic design blogs have a huge reach, and some of them release freebies for their readers. If you have a high-quality resource that could be of use to readers it would provide a tremendous opportunity for exposure. In most cases you’ll get a link back to your own site and you may even get a brief author bio.

While it’s not an easy path to success, the exposure that comes from top design blogs can certainly send some visitors to your site and possibly result in new clients or product sales.

But Don’t Ignore Smaller Sites

Although the leading design blogs do present tremendous opportunities, smaller blogs shouldn’t be ignored. It will be easier to get your resources released at smaller blogs because they won’t have so many offers from other designers, and they still could have a significant and highly-targeted audience. Some smaller blogs have even developed very loyal and active followers, which may result in more downloads or more attention being paid to your freebies.

Brand Your Preview Images

If you’re releasing freebies on other websites and blogs it is a good practice to brand your preview images by using your own logo whenever possible. Most blog readers simply scan content and they may not notice the text that credits you with the freebie, but they’re likely to notice your logo on the image preview. Additionally, many blogs have their content scraped by other sites and if you include the branding on the preview image you will be getting exposure wherever that it is being scraped.

For example, Qbrushes created some brush sets for Smashing Magazine and they used their own logo, as well as Smashing Magazine’s logo, in the image previews. These brush sets have been linked to by a lot of other blogs, and in many cases the preview image is used. So Qbrushes has gained a lot of exposure by using their logo here.

Brushes

Brand Your File and Folder Names

In addition to branding your preview images it’s a good idea to brand your file and/or folder names. Most designers download a lot of freebies, and while those freebies may stay on their hard drive for a long time they might eventually forget who created them or where they were downloaded. If you include your name or your website’s name in the folder or file names it can serve as a reminder when they use the files.

What’s Your Experience?

If you have any tips from your own experience of using freebies for promotion, please share your thoughts in the comments.

Royalty-Free Graphics