Welcome to the third session of Lacuna Expanse Game Art. In this session we will go over the creation of the new web site mural (background). This is a change from the original plan for this session, although with the spur of the moment decision to budget for a mural design similar to the "Blizzard" sites, I think it is appropriate to do the same here with discussing it. The process was a fast moving machine with a short deadline. I created the mural in under 72 hours from start to finish. The web interface took a bit longer.

The game is now released for play and has been a success thus far. There are well over a thousand people playing at the point of releasing this article. The IPhone App has also been released!

A Tournament server has also been released. New features and enhancements are constantly being added… this is quite the game to play for free.

Author: Ryan W. Knope

Ryan W. Knope is a freelance 3D / 2D Artist / Consultant with 14 years experience in the 3D and 2D industry. His main artistic love lies with interior and exterior rendering although he takes on just about every type of graphics work. Ryan is also the architectural / interior rendering voice for 3D Artist Magazine’s Question and Answer Panel along with being the Art Director for Lacuna Expanse. He lives with his wife Krista, in sunny Denver, Colorado.

Article Details

• Programs: Autodesk 3dsmax 2010, Pixologic Zbrush 4.0 and Adobe Photoshop CS4
• Difficulty: Medium To Difficult (Prior Knowledge Of Software Interface Is Needed.)

Seed Planted – The Backstory

About a month ago JT sent me an email giving me a try with creating a new web site design. It included a background mural and a web design much like the "Blizzard" sites. This was both exciting and daunting. I was a bit nervous, but ofcourse I said yes.

This especially made me nervous because the company was looking at different options with web graphics which kept coming up a bit short when the votes occurred between the owners and staff.

All in all this actually was a dream project. I just wish I had more time with it. With more time it would be spectacular, but it still went very well and all parties seemed to be happy.

I do plan on continuing the mural when I get some free time. You can see the finished pre-deployment below.

Step 1 – Conceptual Ideas

When it came to conceptual ideas it was both simple and complex. I was told that it needed a punch, something that grabbed people, made them sign up and hopefully it would be "Blizzard Quality Artwork".

With these comments in mind, I looked at all of the Blizzard sites for hours, contemplating design elements, talking to friends about ideas trying to figure out regions of space, land and ships.

Finally, I began sketching and sketching, although the ideas were very raw, they gave me the base I needed. These sketches conveyed the idea and helped me plan, but looked crappy as an art piece, so I tossed them at the end of the project.

Try to sketch out your ideas. It makes it much easier to organize things in your head. I am a very good "Inside my head visualizer" and sketching absolutely helps me every time. The main idea was to create a web site like the one below, but in a really fast pipeline.

Step 2 – The Starting Point Of Creation

With any image, the starting point can often be the most difficult part. This sounds a bit cliche, but I find this even more the case with a mural type image. If it is a vertical mural, then I find that starting with the ground or bottom is easier, as it provides a point of reference with the rest of the image.

This took some time to figure out. I started with the top, outer space area and shortly I was drawing blanks on the shading and visual process of blending down to the land.

Soon after I built my ground base and it was much easier to visualize how it needed to proceed and the entire process flowed very quickly.

Step 3 – Box Modeling The Ground Base

For starters, I created a heavily segmented plane in 3dsmax. Next I defined a rough view and created a camera. Setting up the basic view helped me determine rough camera angle content and creation.

OVERVIEW OF THE 3DSMAX SCULPTING PROCESS:
• Create a Plane primitive.
•
Add an "Edit Poly" Modifier.
• Turn on "Soft Selection" and set it to your desired falloff.
• Begin pushing and pulling to start the land definition.
• Add a "Turbosmooth" modifier to see heightened smoothing.
• Continue pushing, pulling, extruding, chamfering and beveling.

The next step was to export the model for ZBrush import. For this I simply exported as a .obj. My model upon export was 12,880 faces. This gave enough definition to know what I was going after inside Zbrush.

Step 4 – Detailing The Ground Base In Zbrush

Now, I imported my .OBJ file, placed it into the scene and pressed "T" to make it an editable object. At this point the sculpting began. I used various brushes and laid in details at various brush sizes. Use alphas to add more specific details and texture to the object. Test out different brushes with various alphas. You can get some interesting results that way. Also vary your brush size and intensity of the brush.

Once I was finished adding the details, I then used the "Decimate" plugin to bring the poly count down because my model was now 6.5 million polygons and I knew that I would possibly have other land models, spaceships, buildings and more. I used Decimate to bring it down to about 2 million poly’s, keeping quite a bit of the detail.

The last step in Zbrush was to export the mesh. Export it in whatever you feel comfortable with, but I used .OBJ once more. There is also GOZ which can export directly into 3dsmax, Maya and more in an automated way. This is nice because it brings the model directly into 3dsmax for you.

Step 5 – Defining The Lighting Scheme

The lighting in the main scene was very simple. I used "MR Sun / Sky" only. Then I set up my Exposure control as "MR Photographic, Clear Sky Daytime".

OVERVIEW OF THE LIGHTING STEPS:
• Start up 3dsmax.
• Change the renderer to Mental Ray.
• Import the base object. Place is correctly and set up the correct camera position.
• Drag out a "Daylight System" from the "Systems" menu.
• Change the system to "MR Sun / Sky".
• Set the Exposure Control.
• Test different times of day / sun angles.
• If the render is too dark then lower the "Exposure Value". I went from 15 to 13.

*** NOTE***
Upon testing, I added in a second instance of my base object, transformed it and tested a few more times. This second object added some needed variation and details. I also created another ground plane that had many segments and a noise modifier applied. This object went off into the horizon, adding much more depth.

Step 6 – Applying The Base Materials

For the ground materials I used a dirt texture map. This was added to both "Diffuse" and "Bump" slots of a "Arch & Design" Material. Then I added a "Reflectivity" of .5 and a "Glossiness" of .4. In this case, the bump helped to diffuse the reflections enough to make it less apparent.

This reflection also helped to bring in the sky materials. In my opinion this helps to add some depth and realism. Next I added box UVW mapping from the modify panel and scaled it accordingly.

The materials over all for this project were very simple. No need to complicate things when 3/4 of the work was Photoshop.

You can use "Displacement" and more detailed textures maps if you prefer.

I chose not to unwrap my model, but by unwrapping you could paint very detailed texture maps for all ground elements. You could then utilize the unwrapped coordinates for all of your image maps, creating very realistic surfacing.

Step 7 – Two Worlds, Working Simultaneously

At this point I began working in both 3dsmax and Photoshop at the same time because of the quick deadline. I have several computers in my office. If you only have 1 then it will be difficult to work this way as rendering usually takes most of the cpu power.

The ground base was where I wanted it placed and it was time to plan where to begin putting the city elements. I knew that I wanted them in the foreground, so the background areas of the land mass was open season to adding fires, farms and other interesting elements.

As long as you keep the same lighting and rendering scheme, the items added later will match. Layer masks may need to be added later for some elements as new buildings and objects come in.

If time is short, try to split the creation process so that you can work while you render (If you have more than 1 machine). Working on it this way saved me tons of time and kept the creative juices flowing.

HOW I WORK SIMULTANEOUSLY:
• Create and render the ground base.
• Work on distant Photoshop elements while placing buildings in 3dsmax.
• Render the new base with the city models while adding the sky, clouds, fire, smoke and hues in PS.
• Add in the new city base and continue placing ground overlays next to the buildings
• Edits to buildings can be made inside 3dsmax, resulting in minor adjustments in PS layer masks.

Step 8 – The City In 3dsmax

Models from inside the game were used for the 3D city parts. Minor edits were made and more detailed textures applied. Model edits included beveling and detaching window areas, transforming and duplicating parts along with more detailed materials / textures.

While placing the objects into position I showed only the land mass and the object to be placed. This makes it easier to see object interaction.

I used "Self-Illuminated" Arch & Design materials for the windows. I also made sure that these materials had "Visible In Reflections" and "Illuminates The Scene (When Using FG)" turned on.

Step 9 – The City In Photoshop

Once the 3D portion of the city was rendered and brought into Photoshop I began adding overlays to give the feelings of farms and small buildings. I also used this method for making the appearance of roadways. This helped fill the void between the massive in-game buildings and created a more realistic sense of what was going on.

I also added in orange, yellow and blue hues to give a more dramatic effect to the lighting scenario. I always use the dodge tool a lot as well to lighten up certain facades of buildings and ground areas.

LIST OF PHOTOSHOP EDIT ITEMS:
• Road / City Elements: Find photos that work with your camera angle. Test blending modes and mask.
• Paint in Hues on new, upper layers to create a better sense of mood.
• Add various "light Sparkles" via city images. Test blending modes and use a layer mask.
• Add trees and forests, test blending modes and use layer masks.
• Use the Dodge and Burn tools. Try to accentuate the lighting and lack there of.
• Blend the bottoms of buildings with the ground area. Check out the sharp edges.

You can go as far with this as time permits. I often find myself lost in this, and the next step as long as I am allowed time wise. Set aside time for contemplation. Look and think, take a break and do it again.

Step 10 – Ground Based Effects – Coloring

For the non city Photoshop work, many items were added. I was able to build up details quickly along with adjusting the overall hues of the lower area to give it more feeling and drama. Keep in mind what elements are adding light. Think about how much drama you want to convey. Nothing adds drama like lighting and hue shifts!

LIST OF PHOTOSHOP EDIT ITEMS:
• Clouds: Mask out and blend visually with a layer mask. Check blending modes
• Planet: Use a layer mask and play with blending modes. Sometimes they can create a nice glow..
• Smoke: Set blending mode to screen. Other blending modes often work. Go through the list.
• Fire: I painted in the fire and used a "Screen" blending mode.
• Painted Hues: All over the image I painted various oranges, yellows and blues. Test blending mode.
• Painted Fog: As the distance grows particulates add a haze, paint this in and lower layer opacity.
• Distant Faded Mountains: Use a layer mask and decrease opacity. I used "Soft Light" as blending mode.
• Painted Shadows: Shadows were painted and the burn tool was used. (Shadows = New Layer)
• Painted Highlights: Highlights were painted and the dodge tool was used.

Step 11 – Sky To Space

Creating the sky / space was a very quick process that lasted only minutes. When blending the sky up to outer space, I decided to use orange, purple and blue hues. I did not need to blend the center together perfectly because it would be covered up with the web interface.

The stars were added using a texture map of fireworks from cgtextures.com.

SKY / SPACE PROCESS
• Add the star background.
• In a new layer above the stars paint in hues. (I used 1 layer per color for ease of editing later)
• Test blending modes for hue layers. (Overlay worked best for me.)
• If the falloff on the painted hues is not enough, use some blur.

Step 12 – Adding In The Ships

The ships were already created for in-game use, so the models were already textured and ready to go. First I had to decide which ships to use. Once that was decided, then I simply imported them into my 3dsmax scene file and did "Region Renders". This allowed me to render out only the sections with the ships.

If the file becomes too heavy, you can delete the rest of your objects, keeping the MR Sun / Sky. Keeping the same lighting rig will make all of the items match in lighting. Otherwise shadows will be in the wrong places and it will present a problem later on.

Once rendered, I saved them as a .png with an alpha channel.

TIP: Sometimes there are slight white edges around the objects. To combat against this I rendered the spaceships at double size, then in Photoshop I made a selection and decreased it by 1 pixel and pressed delete. This removed the white edge. Then I sized the space ship renders to the size of my working file and placed them.

Step 13 – Conclusion

In this session we went over the initial concept and the talks of how the beginning came about. We also covered creation elements for the lower half of the mural rendering.

OVERVIEW:
• Plan the object layout even if you are not good at drawing or sketching.
• Find a starting point that works for you. Test both upper and lower if you can’t decide.
• Build whatever base you decide to start with. Keep in mind ease of creation.
• Do not detail the base until you are satisfied with the pre-viz.
• Don’t over complicate if you decide to use Photoshop or Post for most detailing.
• Render out an "Ambient Occlusion" pass in 3dsmax to accentuate shadows.
• Keep in mind thedensity of the 3dsmax scene. You don’t want rendering problems later.
• If time is short, work in both Photoshop and 3D simultaneously if you have acces to multi-machines.
• Utilizing photos of cities at night can save a huge amount of detailing time.
• Test blending modes of each PS element that you are adding. Sometimes it will surprise you.
• Paint in shadows to accentuate the depth. Most of the time game murals are not about reality.
• Contrasting colors and light / dark are your friends, it brings out the mood more.
• Think about what color combinations accentuate the "Urgency of the situation" inside the image.

Please take some time to check out the game. It can be played for free at www.lacunaexpanse.com

Related posts:

1. Creating The Lacuna Expanse Game Art – Session 2
2. Creating The Lacuna Expanse Game Art – Session 1
3. Creating A Space Ship In 3DS Max (Session 2)

In this tutorial will be exploring one of many production pipeline methods used for creating a next-gen game weapon. This process can easily be adapted to be used for any type of game asset, such as props, characters and environments.

This tutorial is designed for intermediate to advanced users and assumes that you have at least a fair understanding of each of the programs used. We will cover the entire process of creating a next-gen game asset, but I will not be going into a lot of detail for each specific step, just giving a general overview of the workflow involved. So let’s get started.

Author: Angel Trudeau – AngelTrudeau.com

Angel is an experienced and award winning 3D artist with over 7 years of industry experience. He specializes in hard-surface and environment models, with textures, for use in next-gen, current-gen and casual games. After graduating from the Art Institute of Colorado, Angel has been working as a freelance artist producing many illustrations and game assets for over 9 titles. Some of his most recent game releases were ARB Studio’s SteamPunk MMO and Buck Hunter for the iPhone.

Tutorial Details

• Program: 3DS Max 2011, Zbrush 4.0, Xnormal 3.17.3, Photoshop CS3
• Difficulty: Intermediate to Advanced

Scripts and resource files:

• Textools: http://renderhjs.net/textools/
• Resource Files: Shotgun_refrences.zip

Step 1: Concepts and Modeling

I generally start with research and concepts, but for this weapon, the client wants a next-gen weapon that is similar to the Browning automatic shotgun, but only 5k triangles or less. Its to be used in an iPhone game, so it doesnt have to be super detailed but have enough detail that it will look realistic in-game. To avoid any copyright infringement for the weapon we will need to make some small changes to the body of the gun, but nothing to drastic.

Since this model is going to be based of a real-world weapon I don’t really feel the need to do concepts but I did do a quite of bit of extensive research to ensure I had good references of the shotgun. I have included the reference images I used for this in the zip file, so have a look.

Once you have had time to look over the references and get a good understanding of the direction we need to go, then you can start the modeling process. Over the course of this tutorial we will actually make several meshes. The first mesh we will create is the game model, followed by the base mesh model and then the sculpted high-rez model.

On the game model the mesh will appear without any smoothing and the mesh will be highly optimized for use in a game engine. The game model will also have all the UVs, whereas the base mesh doesn’t need to be UV’d.

On a base mesh you have to consider a few things: One of which is the fact that the base mesh will be smoothed to high degrees, so any hard edges we want to keep hard, needed to be preserved. It is also extremely important that the base mesh has an even poly distribution because this insures that during sculpting all of the mesh will have even resolution. If the poly distribution is uneven, with some areas having a high density of polys and other areas with low density, then sculpted strokes and details will not appear uniformly smooth. (more on this later)

- Basic Form

We start the basic form using primitives, then convert them to editable polys and adjust the shape further.

- Creating the Game Model

After creating the basic form, we can begin adding in details, starting with the largest details first and working our way to the smaller details. Once the main details are modeled in we can then optimize the mesh, meaning that we remove all unnecessary edges, vertexes and faces. Some edges may appear as if they could be removed at this stage, but when dealing with a normal map it is important to have a few extra edge loops around tight edges. This will ensure that the normal map displays correctly in the end. If after applying the normal map to the model you have dark areas around some of the edges, you will need to add in some extra edge loops to clear them up. Eventually we should come up with something like this:

- Creating the Base Mesh for Sculpting

For the base mesh, we will start by cloning the game model. It is important to ensure you don’t move either the game or base meshes at this point, as they will need to be aligned in order to get a proper projection for the bake later on. You will see why this is when we get to baking the normal and using a cage.

Once you have cloned the mesh we can start redoing the topology. The goal here is to ensure that there is a fairly even distribution of polys so that we maintain our edges and get a uniform sculpting mesh.

- Exporting Base Mesh Pieces

When exporting it is important to break the model up into as many separate pieces as possible and export each of those pieces individually. This serves two purposes; first is that we will then be able to import each individual piece into Zbrush and assemble the weapon again using sub-tools. This gives the ability to work with and edit each piece individually, so we have a lot more control. The second reason for doing this has to do with the baking process later. If you were to try and bake the whole weapon by itself, without breaking it up, then you would get many different errors on the normal map due to overlapping mesh pieces and lighting of those pieces. To ensure that you get a good clean bake it is vital to break up any mesh into as many separate pieces as possible.

In total I had 7 pieces to export for this mesh, which were all exported as Obj’s and using the ZBrush preset within the exporter.

Step 2: ZBrush Sculpting

This part is fairly simple because we don’t need to do much, we mainly just need to add in the grip and wood patterning with a little bit of damage.

- Importing, Sub-dividing and SubTools

Import each of the pieces that you previously exported from max. Then draw the main body mesh onto the canvas. Open the sub-tools menu and append all of the other pieces you just imported. All the pieces should appear in their proper position and now you have total control over each piece.

Now we go through and subdivide each individual sub-tool. For pieces that I need to add a lot of detail to, such as the wood stock and grip, I will subdivide up to a level of 6, whereas I will set all the other sub-tools to 4. You can always add more levels later if needed.

-Sculpt in Details

A few things to keep in mind when doing these kinds of details is that a normal map won’t pickup really fine details, so it is important to over exaggerate the details you do want to come through on the normal. For all those finer details we will use the specular map to draw them out.

Now we can start on sculpting. We use masks, a little bit of projection master and some free hand sculpting to get the look we are after. I start by adding the wood grain and build up from there.

We then do the stock and grip detail using projection master again.

Add in any other detail you want. You take the details as far as you want at this stage, down to the finest detail. Just remeber that the normal map won’t pick up really fine detail and you must exagerate any detail you do put in for them to show up reasonably. For this model I just threw in a few basic details like some screws and finsihed the front grips detail, but you could also add in things like lettering on the barrel, some etching details
on the sides, wear and tear on the barrel end, etc…

- Export Pieces

Export each sub-tool individually and at their highest sub-division level. Although if some pieces are just has too many polys to export, then you may need to use decimation master to lower the poly count without losing detail. Decimation master is a great way to get a super high poly model down to a reasonable and workable file size, but once an object has been decimated it can no longer be edited, or sculpted on, so only use it once you are sure that you are finished with the sculpting stage.

Step 3: UV the Game Model

- Textools – http://renderhjs.net/textools/

I use textools by Renderhj for several reasons, but mainly because it helps simplify the UV process quite a bit. I won’t go into much detail on all the options of textools, but you can get plenty more info on them if you go to Renderhj’s website. I do highly recommend looking it all over though as it is a great help with the entire UV process.

- Flatten

First you will need to break up the UVs and there are a variety of different ways to do this. I like to do it one element at a time so that I don’t get cluttered up. I also always make sure that Normalize map in not selected in the Unwrap modifier, so that all faces stay their true dimensions. Of course this means that the UVs will be very large and will need to be scaled down at the end, but it makes reassembling them a lot easier in the end

- Stitch and Align

Once the element(s) have been flattened you can go about stitching together all the faces. I use the Textool Linear align tool to straighten a lot of edges after stitching. You want to ensure that all straight edges on the mesh stay straight in the UVs. To align any uneven edges, select the edge(s) or vertices and click the linear align button. All the selected should snap into a straight line.

- Pack

Once all the elements have been flattened and stitched back together it is time to pack them and we want to pack them in such a way that we maximize the UV space and use as much as possible. We also have to consider that some of the pieces of the model may be a lot more visible then others when in-game, so it may be prudent to give those pieces more texture space.

Textools has several features in it that allows you to set texel and pixel density for specific UVs, which is very handy for larger projects, but for this particular weapon I just visually note which pieces I want to get more texture space and scale them up accordingly. You can find more about how to set the texel density by going to RenderHjs homepage

I then select various pieces and click the pack button. I then manually move and arrange each of the pieces to fit them into a square region. Once I am happy with that, I select them all, uniformly scale all of them down, and move them into place within the UV area.

If you have any mirrored UVs you will need to offset one of the mirrors by exactly 1 unit to avoid any baking problems.

Step 4 – Baking Normals and AO

- xNormal – http://www.xnormal.net/1.aspx

xNormal is by far the best when it comes to baking your normal maps. It produces much better quality bakes then even max or Zbrush can do, so that is why I use it and recommend that you do to as well. It is free to download and use, so there is no reason not to. You can do the bakes in Max and Zbrush if you don’t wish to download it, it is a similar process to baking AO maps, which I will go over later, but xNormal is less prone to baking errors and has several tools that aid in cleaning up any errors that do occur.

- Importing and Baking Individual Pieces.

This part is pretty simple and repetitive as we will use the same process for each piece of the mesh. I will go over it in a little more detail, but feel free to explore xNormal more thoroughly on your own.

Start by loading the high definition mesh first. Click the High definition button on the right. Right click anywhere in the left screen area and choose Add Meshes. Locate and select your high poly mesh. Now scroll over to the far left and select Averaged normals from the drop down menu.

Now click the Low definition button to the right and load the low-rez mesh the same way as the high-rez. Scroll to the left and change the smoothing to Averaged again, and also be sure to select Cage. The cage is important for getting a nice smooth normal map. It tells the program exactly how and where the high- rez details will be projected onto the low-rez. We can create a cage in 3ds max and import it in if we wanted to, but xNormal gives plenty of controls for creating and editing the cage.

To access the cage we need to use xNormals 3d viewer. Click the 3d viewer button on the right and then click Launch Viewer.

The controls in the viewer are much like a FPS game and uses the same keys to move forward, back and side to side etc…You should see your object(s), but you may have to orient the camera a bit to find them.

Turn on Show cage and then Edit cage. Several sliders will appear which will enable you to push and pull the cage mesh so that it fully encloses the other meshes. You want to make sure that the cage does not penetrate the high or low-rez meshes so that it can project the details properly. When you have finished, click the close button.

Now go to baking options. Set your output file and make sure normal map is selected on the left. Set your desired map size and edge padding to 2 with a bucket size of 16. Click generate map. If there are any glaring errors you may have to adjust the cage more to get a better bake. In the end you should get something like this:

- Compile in Photoshop

Repeat the same process for all the other pieces and once you completed them you will need to assemble them in photoshop.

Some people like to just copy over each piece into one file and set them all to overlay, but I prefer to cut out the excess blue areas using the saved alpha because then I avoid the possibility of losing some of the detail in the normal map. To do that you need to copy the image and the alpha over to the master file, then use the alpha to cutout any excess. By copying it over like this you ensure that the image is exactly lined up in its position. If you were to cutout the excess blue before copying over then you would have to manually place the piece which can lead to various headaches later.

Once all the pieces are assembled, merge them into one layer. Now go to the green channel for the layer and select it. Press crtl-I to invert it. You do this because otherwise the normals will display funny in max. You can invert the green channel in Max as well but its just better for the development team later if it is done in Photoshop.

The last thing to do here is to normalize the map. This makes sure that the normals of each of the pieces is cohesive. xNormal makes this pretty easy and installs a Photoshop plugin for doing just that and the plugin should have installed along with it. Just go to Filters>xNormal>Normalize normal map. You can also use the NVidia tools plugin as well if you have it.

Now apply the normal map to the game model and turn the bump value to 100. Click render and you should get something like this:

- Baking the AO

We will bake the Ambient Occlusion (AO) map in max using the render to texture feature. There are several ways to bake AO maps and some of those ways a fairly involved, but for our purposes we will stick to the quick and dirty method.

First we set up a very simple lighting rig. Basically you just want enough light to tell the renderer where the dark and light spots are, as well as bring out the normal map. Do a few viewport renders to ensure you got the shading the way you want it.

Next go to the Render to Texture menu. Add the AO map and set the paremeters to your liking. Then click render to get something like this:

Step 5 – Textures

- Base Metal Texture

You can use a pre-made base metal if you wish but I prefer to start from scratch to give me more control of the texture as a whole. I start by choosing two similar colors of gray in the color picker, then go to Filters>Render> Difference Clouds. Now add a little bit of noise, between 10-15%, and then use a Gaussian blur of about 2-4 pixels. You should get something like this:

- Add in More Detail and Texture.

First add in the AO map we generated earlier. Paste into the image and set it to multiply. Adjust the opacity to your liking.

I then hand-paint most of the damage on the weapons using my tablet and a 1-5 pixel brush. I also turn on pressure sensitivity and jitter to give the paint stroke a more natural look. I then paint in damage where I would expect to find it, like edges of the body, the barrel iron-sights, butt of the stock, etc…

I then use a soft square brush to paint highlights on a new layer.

We can use layer masks and dirt maps to add in a final bit of detail.

- Specular

To make the specular we need to copy the base metal, the wood grain, and the scratches layer so that we can desaturate them and then adjust their levels to suit the specular map. Adjust each layer individually to get the desired look.

6. Variations

Once the main model is done it is pretty easy to make some variations of it. For this job the client wanted 3 versions of the weapon. The one we just completed is the first version and from it we can quickly make a double-barrel, and sawed-off version of the weapon.

Being mindful to not destroy the UVs, I cut and copied different pieces of the mesh to get the two versions. I then did a little bit of texture variation to complete the package.

7. Final

When all is said and done, you should have 3 different versions of the same model. Each should have a Diffuse, Specular and Normal map and all are 1500 polys or less.

Related posts:

1. Creating The Lacuna Expanse Game Art – Session 2
2. Creating The Lacuna Expanse Game Art – Session 1
3. Creating A Detailed Master Plan Rendering – Part 3 – 3D Studio Max and Photoshop

I hope you enjoyed the prior session of the Lacuna Expanse artwork tutorial. In this 2nd installment I will be discussing the experiences of taking a raw 3d render into photoshop and creating the finished detailed planetary tiles, with variations. I will also be discussing the ground base creation along with a bunch of quick notes at the end.

This set of articles is meant to educate on the processes with tips and general information rather than being a complete tutorial from start to finish with creating a certain object. If you would like a dedicated tutorial for a certain object or item in this session set please contact me or Instatuts.

The game is now released for play and has been a success thus far. There are well over a thousand people playing at the point of releasing this article. The IPhone App has also been released!


Please take some time to check out the game. It can be played for free at www.lacunaexpanse.com

Author: Ryan W. Knope

Ryan W. Knope is a freelance 3D / 2D Artist / Consultant with 13 years experience in the 3D and 2D industry. His main artistic love lies with interior and exterior rendering although he takes on just about every type of graphics work. Ryan is also the architectural / interior voice for 3D Artist Magazine’s Question and Answer Panel along with being the Art Director for Lacuna Expanse. He lives with his wife Krista, in sunny Denver, Colorado.

Article Details

• Programs: Autodesk 3dsmax 2010 and Adobe Photoshop CS4
• Difficulty: Medium To Difficult (Prior Knowledge Of Software Interface Is A Plus.)

Detailed Land Mass Tiles: Variation In Levels

With the game play in mind, I needed each of the detailed land mass tiles to include about 10 variations or more per PSD file. So, creating extra brushed metal structures, vegetation and add-ons to the buildings became important.

As I built each piece, I had to count the variations and additions that were possible. Otherwise as a player upgraded their buildings, they would not differentiate from level to level. I also had hopes that these level variations would intrigue the player enough for them to try to get to the next level to see the upgraded building.

Step 1 – Taking The Render From 3dsmax

In the last session we left off with rendering the main building mass. Since the tile size is 450px, 450px, I usually zoomed to that size in 3dsmax or rendered a bit larger, scaling down inside Photoshop.

Save out the render as a .png, without the ground, as long as the shadows are easy to replicate. Otherwise, render with the ground plane (Apply a material to it as medium gray.) and delete outside the shadow area in Photoshop.

You can also set up a matte shadow material inside 3dsmax and apply it to the ground plane. Utilizing a matte shadow material would keep the shadow in the rendering and make the ground plane transparent. This is a good option, but I will not cover it in this article.

You can see below that I deleted the ground mass outside of the shadow area.
(Note, different buildings are used in certain steps, but the end result is the same.)

Step 2 – Detailed Building Part 1 – Land Base

Adding the base is important because it grounds the building a bit more. It also adds a bit more detail in comparison to the building sitting on the land mass alone.

In Photoshop, I blended three detailed ground layers to match the building. For some of the building tiles I used up to 5 different types and colors. I also tried to use ground colors that matched the building type and style. For example, I used dirt around the "Development Ministry", not green grass.

You want to blend them nicely together using layer masks. This allows you to edit the blending more later without having to bring in the image once again. Quick edits can be made much faster.

Step 3 – Detailed Building Part 2 – Trees and Vegetation

Now we need to begin placing tree’s and vegetation. With the tree’s, I used my library of pre-rendered top view elements. You have a few options with this, you could purchase a top view tree library, find tree’s on google and mask them out, or find 3D tree’s and render them out in the view desired.

My library of top view pre-rendered tree’s is available HERE.

If you render the tree’s, save the image as a .png or .tga. These formats includes the alpha or transparency. NOTE: Personally I have found that .png works the best for me when saving out of 3dsmax. There seems to be less of a halo when compared to saving as .tga.

We need to create the shadows once the tree’s are brought in. I created the tree shadows by adding a "Drop Shadow" layer effect. I visually matched the shadows from the building structures. When creating the shadows for the tree’s, keep in mind that the tree’s may be shorter than the buildings. This means the shadow that is thrown will be smaller in distance.

Another thing to think about is shadow color. Depending on the lighting system you use to render the buildings, the shadows might have a blue, yellow or black tint. Make sure the shadows added in Photoshop match this.

Step 4 – Detailed Building Part 3 – Out Buildings and Mechanics

For many of the detailed planetary tiles, I added small out buildings and mechanical details that could be turned on or off depending on the building level. This added to the variation between levels, giving new details to each building as they were built and then upgraded throughout play.

Some of the mechanics and out buildings were created in 3dsmax as simple boxes or eaved structures with a metal material applied. Other items were found in random photographs via google and other texture sites.

In theory you could use elements from an aerial photograph as well.

Step 5 – Detailed Building Part 4 – Overlays

Various buildings throughout the game include overlays to add to the details. This is a fantastic way to add a ton of quick details. This can turn an average building into one with a very detailed look.

I started by finding structural bracing, mechanical images and night shots of buildings with the lights on. The sources are not limited to this, you can actually use anything you desire. Be creative.

Next I placed the images inside the psd and deformed them to match the building angles using the "Transform" tool and "Distort". I blended them with the eraser tool once they were in position. You can also use layer masks.

Then I scrolled down the blending mode list to find a mode that worked well. In this situation "Soft Light" and "Color Dodge" worked best. Play around with the blending modes and take note of how different colors, saturation levels and contrast play a part.

Light glows can also be added in the same way. Many great images can be found at CGTextures.

Step 6 – Bring In A Ground Backdrop – Testing With Lands

Now that all of the building details and surrounding elements are added, it is time to test the tile with several backgrounds along with black and white. This is the final check.

First, I made sure to check for hard edges, where I missed with the eraser or layer mask. Often these are hard to see with a textured background, so I also checked with a white background and then again with a black background. This problem occurs most when you are using layer blending modes other than normal. Make sure to check well, because it can be a little embarrassing if you send a gnarly tile to your boss.

Also check for elements that have moved, shadows in the wrong direction and tree’s that are intersecting with building elements the wrong way.

Once I was happy with the result, I sent the tile off for approval.

Step 7 – Creating The Tilable Planetary Grounds 1

There are a lot of ways to create tiling images. You can create them in Adobe Photoshop or you can use an application to automatically create the tile.

I began by creating them in Adobe Photoshop, but they had a bit of a tiled appearance still and did not match the quality I was looking for. With this in mind I began asking some of my friends in the industry and checking the web for an application that would create a better tileable ground.

In my discussions Luxology Imagesynth was mentioned. I checked out the web site and did some reading. This, I quickly discovered would be the solution! So, I went and purchased it for $100 and it was well worth it. An hour later I had all of the games planetary land masses finished.

This application can be ran as either a plugin for Photoshop or as a standalone program.

I will not go into detail on how to use Imagesynth. There are many detailed written tutorials and videos online.

Making a Seamless Brick Tile with imageSynth

Step 8 – Creating The Tilable Planetary Grounds 2

I found most of the initial ground images at www.cgtextures.com They have a fantastic library to chose from if you go to the "ground" section. They also have just about every other type of image or texture.

Below you can see the product of using imagesynth. This is actually 9 of the tiles placed together to show the minimal visual tiling. I created over 20 land tiles in a little over an hour with this process.

Step 9 – Creating The Tilable Planetary Grounds 3

This step is a wish list item I have and is great in artistic theory and creation, although I don’t know how well technically it will work inside a browser based game, such as Lacuna Expanse. I don’t know because I am not a programmer. I assume it would add more to the load time and stress of the server.

To add a more detailed basic ground variation, in theory you could add a 2nd ground "Layer" that loads above the ground base that we created above. Even better would be 2 or 3 that load at random. These would be .png images with transparency. The point of these layers would be to add variation of color and texture to the planetary surface.

This could be done artistically by bringing in other ground types that were previously created. In Adobe Photoshop you could erase areas of the secondary ground, blending them with the lower ground type, thus creating the variation. Once blended to the bottom ground image, only the blended layer would be saved as a .png.

These layers would then load at random within the game. If the use of several .png images within the same layer is possible, then the game map could be very detail oriented and realistic.

Great Race / Ancient Structures – Overview

The "Great Race and Ancient Structures" were created with almost all of the same principles in mind as the "Modern Technical" tiles that we just went over. There are 2 major differences between both.

1) Old style textures were used for the great race, instead of the futuristic metal and glass.
2) The 3dsmax greeble plugin was not used for any of the great race buildings.

The structures themselves remained very basic inside of 3dsmax. The most detailed structure was a set of towers I created after watching Lord Of The Rings many years ago.

Most of these structures began with primitives and a little bit of edit poly. A lot of them included spectral or fire special effects. These effects were all created in Adobe Photoshop by bringing in images of lightning, fire and even water refracting. These images were then deformed and masked out to the areas that I desired. Next I went through the layer blending modes finding ones that fit nicely with a supernatural effect.

Modern Farming Tiles – Overview

Below you can see the overall process of creating the farming tiles. All of the items were quite basic in nature, defining a much more complex complete image. The 3D design in this tile only consumed about 8 minutes of my time. Super basic structures were used and then modified and combined in Photoshop.

The wood decking and wood boxes were created in Photoshop using textures of planking from www.cgtextures.com

Many aerial photographs were used during the creation of this type of tile.

I did a lot of painting shadows and highlights in a top layer.

One thing I kept in mind with the farming tiles… all of the buildings and elements are at a super low elevation when compared to any of the modern buildings. This made shadow creation a breeze. With the structures being so short, they would be created inside of Photoshop easily. With that in mind, drop shadows worked perfect.

Conclusion Of The Tile Creation Process

Once the process was identified, it made creating hundreds of pieces very easy, fast and high quality. Identifying a standard process early in the game can be extremely beneficial!

The goal is to find a way to create buildings that are similar enough in process, but different enough in viewing that the player can distinguish between the types quickly.

Some Quick Notes:
• Utilize Google images to find suitable overlays and images.
• Define a process that encompasses most of the artwork creation.
• Research workflow’s that other artists use.
• Define a style and stick to it. There needs to be a level of cohesion.
• For 2D games, use Photoshop to add details. It can be quicker than creating them in 3D.
• If a commercial plugin will yield quicker results within budget, do not be afraid to use it.

This closes up the writings of this session. I hope that you enjoyed this article on the Lacuna Expanse game artwork. It has been a lot of fun writing it.

In the next session we will continue the discussion with a quick segment on space ships and then move on to discussing the "Natural Formed" tiles. The creation of the "Naturally Formed Tiles" included a lot of Pixologic Zbrush use. I will be covering the tools in zbrush and the process of getting the models into 3dsmax for rendering, along with finishing the tiles.

Thank you once again for checking this out. See you next time!

-Ryan

Related posts:

1. Creating The Lacuna Expanse Game Art – Session 1
2. Experiences In Creating The Lacuna Expanse Game Art – SESSION 3
3. Creating A Space Ship In 3DS Max (Session 2)

In this 5 session set I will be going over my experiences with creating the world of artwork for the online and IPhone based game "Lacuna Expanse". The article set will start with JT Smith saying a few words about the game. Then I will begin to cover the difficulties and experiences involved with creating the mass of artwork and directing / creating the in-game and promotional materials. Then I will begin explaining the process of creating the artwork.

This set of articles is meant to educate on the processes with tips and general information rather than being a complete tutorial from start to finish with creating a certain object. If you would like a dedicated tutorial for a certain object or item in this session set please contact me or Instatuts.

Please take some time to check out the game. It can be played for free at www.lacunaexpanse.com

Author: Ryan W. Knope With Game Forward By JT Smith

Ryan W. Knope is a freelance 3D / 2D Artist / Consultant with 13 years experience in the 3D and 2D industry. His main artistic love lies with interior and exterior rendering although he takes on just about every type of graphics work. Ryan is also the architectural / interior voice for 3D Artist Magazine’s Question and Answer Panel. He lives with his wife Krista, in sunny Denver, Colorado.

Article Details

• Programs: Autodesk 3dsmax 2010 and Adobe Photoshop CS4
• Difficulty: Medium To Difficult (Prior Knowledge Of Software Interface Is A Plus.)

What The Game Is About

The Lacuna Expanse (or Lacuna for short) is a friendly, massively multiplayer empire simulator where each player takes the helm of a fledgling empire. Unlike most games that you’ve heard of in this genre, Lacuna is not about building huge fleets of ships to go crush everyone else. Instead, it’s about Espionage, Economics, and Politics. That doesn’t mean there isn’t conflict, there is, it’s just that it is carried out in the form of an espionage driven cold war using spies rather than using massive fleets of ships.

As a player you can take many roads to success. You can simply toil along playing the game like it is in the vein of Sim City or Railroad Tycoon, building the best single colony you can build, and not be involved in working with other players at all. It also has a healthy dose of strategy elements similar to games like Civilization and Masters of Orion. You can become a master trader, ship builder, or mercenary. You can even become an explorer scouring the Expanse looking for ancient artifacts. You can be involved in alliances, help to form a government, and pass laws. Or you can be an antagonistic marauder. These choices and more are yours. – JT Smith

Game Genre

Lacuna is very much a genre crossing game. In the early stages it feels very much like a simulation, like Sim City. As you reach out into space it starts feeling more like an empire builder Masters of Orion or Civilization. It has elements of all of those games, and a lot more. While those games are mainly designed as single player games (or a couple of players), the Lacuna Expanse has thousands of players. 

Genre is a sticky subject because it gives you an impression of a game without even playing it. Some games fit neatly into a genre, but with The Lacuna Expanse the player’s style greatly impacts what genre it fits. -JT Smith

The Games Supported Platforms

At launch Lacuna will have a web-based client that will work with the latest version of Internet Explorer, Chrome, Firefox, and Safari. It will also have an iPhone client soon after launch (waiting on the Apple App Store to approve it). One of our play testers is already working on a native client for Windows, Mac, and Linux. And we anticipate doing an Android client at some point in the future. 

A unique feature of our game is that we are exposing the API publicly to developers. Lacuna is built off of a Service Oriented Architecture, which is just a fancy way of saying that it’s capable of working with everything. The server doesn’t care what client is interfacing with it. This means that fans that are more technically inclined can write their own user interfaces for the game and simple utilities to make aspects of the game easier. Most massively multiplayer games frown on that, but we encourage it and have developed the entire game around this premise. – JT Smith

A Bit About The Game Staff

We are a small group of developers who usually build high-end business applications. One of us, JT Smith, wrote one of the first web based role playing games back in the late 1990s. The idea for Lacuna came from an idea he had back then, but the technology didn’t yet exist to make this sort of a web-based game until the past few years.

We’ve been working on Lacuna since January and plan to launch our public beta in October.  -JT Smith

Groundwork To Be Laid (Overview Of Land Mass)

In the beginning of the contract I tried to get a feeling of the style in which the artwork had to be designed. I also had to figure out all of the technical aspects of how the art was to be used in game. Once the technical aspects were defined, I decided to create the in-game artwork at over twice the size of what was specified. I did this for 2 reasons.

• Detailing in Adobe Photoshop is easier when painting onto a larger image, then scaling down when needed.

• If the in-game artwork was to be zoomable later, then I would already have the size, thus not having to re-create all of the in-game artwork.

Deciding to create the art over 2 times larger proved very beneficial! Soon after finishing the initial planetary tiles JT noticed that he could add the zoom feature in the game and showcase the game artwork at a heightened level. This was not something we were counting on, but it was possible because of pre planning.

To be quite honest, the last thing I wanted to have to do is go back and re-create everything larger when there are hundreds of planetary tiles, each detailed and a piece of art in itself. I was also hoping to have a poster printed of all the tiles connected. So, I was looking out for my client and I wanted to have a nice framed piece of artwork displayed in the office showing the vast amount of work and the details therein.

Moral of the story here, is to create larger than the client needs, especially if there are hundreds of images you have to create. It could save you months of time and quite possibly make the client smile ear to ear!

Defining A Planetary Tile Style

When first beginning the project I was provided a basic description of the buildings purpose and it’s name, no concept sketches. JT left it up to me to come up with an in-game planetary style and did not want to spend a lot of time working on coaching the style type of each piece.

With this in mind I designed a few tiles and got his thoughts on the style and general look. From there I kept the style similar for the rest. In the long run, I believe the lack of direction actually proved very beneficial to all parties involved.

At first it was scary not having any conceptual design, but then it began to flow very fast and I was able to utilize certain tools inside Autodesk 3dsmax 2010 along with plugins to replicate the process quite simply and more importantly… very fast.

We decided upon a general glass and chrome / stainless steel look for most of the modern building based tiles, futuristic in design. Generally this meant I could use about 5 3dsmax materials over and over. Cutting down most material creation time after the first tile.

Planetary Tile Technical’s

Original Size Specification: 200, 200 Pixels
Actual Creation Size: 450, 450 Pixels
Size Used In-Game: 450, 450 Pixels (Zoomable)

The planetary tiles began as including the ground mass, then was switched out to having 2 sets of tiles. The two sets being the buildings as .png without a ground floor (Or just shaded ground detailing), leaving the main land mass out.

The land masses / ground floors were done in a different tile set, so that each planet could have a different land mass color / style.

Building / Detail Tiles: These were saved with a transparent background, thus negating the importantance of tiling.

Ground Base Tiles: Created to tile using different ground type images and tiled using "Image Synth". These tiles were created at a larger size so the tiling effect, if any, did not match the building size / bounds.

The Four Basic Planetary Detailing Subsets

For starters. I began with defining a general look and feel for each type of planetary tile. This set of parameters would transfer through to almost all of the tiles within the game.

Modern Technical Tiles: Variations of metals and glass.
Modern Farming Tiles: Mostly created in Photoshop. Created to mimic current farming.
Natural Formed Elements: A mix of 3D and Photoshop. Many tree’s are rendered and reused.
Great Race / Ancient Structures: Created mainly in 3D with some Photoshop. Aged stone and wood used.

These 4 land detailing subsets make up most of the planetary based artwork. With that basic direction, I could reuse many of the elements and materials.

Step 1 – Modern / Technical Tiles: Adding The Sun and Sky

I began with opening up 3dsmax and setting Mental Ray as my render engine. Then I created a "Daylight System". You can find this under Create/ Systems either in the top menu or the tabs to the right of the interface.

Drag it out and set it to the time you desire by changing it under the "Modify" tab (the time is under the button labeled "Setup".). Also change the sunlight and skylight type to "MR Sun and MR Sky".

For the date and time I chose "Manual" and I placed the sun where it gave me the shadows that I desired.

This sun / lighting rig was used throughout all of the tiles, as all of the lighting has to match.

At this point, setting up the "Exposure Control" is a good idea. You can find the exposure control setting under the "Environment" window. I changed the exposure control to MR Photographic, Physically based Outdoor Daylight, Clear Sky.

Step 2 – Modern / Technical Tiles: Getting A View Approved

Next, I placed a few boxes into the scene with an average set of building heights. I then placed a plane as the ground. Once the test objects were in, I went to the top view and rotated the view down slightly, creating an orthographic view.

At this point, I threw a gray material on the boxes and the plane and rendered it out. I then adjusted the lighting and viewing angle to match what I desired. The render was then sent to JT to verify the view type. Once approved, I began creating the real artwork.

Step 3 – Save A File With The View / Light Setup

Ok, so this is a quick step, which I could have mentioned in the previous paragraph… although, I made it it’s own step because of how important this is. Save the file from the previous step and use it as a template. If you lose the camera angle and lights, you will have to try your best to match… which may not produce the best results.

Step 4 – Boxing Out The Building

I began with a box situated on the ground plane. Then I added an "Edit Poly" modifier. In face mode, I used the extrude tool to create a more dynamic shape. You can go as far as you want with this method. Box modeling is a very common technique that has been around for quite a long time.

Step 5 – More Edit Poly: Insets

I want to add some windows. So, I am going to use the "Inset" tool under edit poly, face mode. Simply select the face that you want to inset and drag in. This will automate the cutting and create a even border.

Step 6 – More Edit Poly: Extruding The Insets

Now we want to use the Extrude tool to push the insets in, creating the window masses. You can find the "Extrude" tool under face mode in edit poly. Just click on the face and drag it in.

Step 7 – More Edit Poly: Bevel

Bevel is a great tool. It can be used to bevel in or out, just as extrude can. I beveled my window surrounds and building tops. I also double beveled some items. This is a fun and quick way to give the model some shape.

Step 8 – More Edit Poly: Detaching The Insets

While in edit poly face mode, select all of the window faces. Scroll down to the "Detach" button. After you click it, you will see a dialogue box pop up. Name the new object and choose if you want it to be a clone, object or element. I chose to have it detached as its own object by leaving the 2 check boxes blank.

Now that we have detached windows… we can now apply some materials.

Step 9 – Creating The Materials

The material creation for the modern buildings is quite easy. I used 2 presets for most of them. Press "M" to bring up the material editor. Select one of the material editor slots and change the material type to "Arch & Design". Now, where it says "Select a template", select "Glass (Thin Geometry)". Apply this material to the glass objects in the scene.

For the main building object, repeat the same steps in a different material slot and pick the "Brushed Metal" preset. To help round the edges of the building, I turned on "Round Corners" under the special effects tab in the material editor. You need to either be working in scale to know the distance of this value, or play around with it.

For the ground, you can add any dirt or grass oriented image to the "Diffuse" slot of a new material. I used Arch & Design for this as well. The ground plane was less important, because it was not used in most of the final renders.

Step 10 – Applying Materials And Rendering

The materials have now been applied, changing the samples per pixel was the only difference from the standard render settings. I used 16/16. This value helped smooth out the brushed metal material, making it less grainy.

You should now have a render similar to the one below.

Step 11 – Adding More Detail With Greeble

Greeble is a plugin for 3ds Max that creates boxy structure quickly and easily. It proves very useful for adding mechanical wall type details. This plugin has saved me days of time while working on Lacuna Expanse.

You can download and read about Greeble HERE.

Install the plugin and then reopen 3ds Max.

The previous detailing could work for the building, although with each modern building type I tested using the "Greeble Plugin" to add detail very quickly and easily. Select the main building object and scroll down the modifier list and pick greeble. Instantly you should see the geometry change.

Play with these options to get the right density, heights and tapers for the look you desire.

Quickly and in only a few steps, we have a futuristic building suitable for a far shot.

Conclusion

So far I have went over some of the conceptual ideas on how the art works together. Understanding the needs of the project is the first task. Once you understand the technical needs, then you can progress to actually creation. Creation of the land tiles can be streamlined by following a similar process for each one.

We also began creating a planetary building within 3dsmax.

In the next session I will go over taking the raw 3D render into Adobe Photoshop and finishing the building tile. I will also cover the artistic differences between the 4 land detailing subsets, and how the creation progress differs a bit for each.

I hope you enjoyed this session.

-Ryan W. Knope

Related posts:

1. Creating The Lacuna Expanse Game Art – Session 2
2. Experiences In Creating The Lacuna Expanse Game Art – SESSION 3
3. Creating A Space Ship In 3DS Max (Session 2)

Author:Tudor-Ionel Cucu (nickname:Crimz)

Freelance graphic designer Cucu Tudor-Ionel is a student located in Bacau, Romania and currently writing tutorials based on personal projects. At the age of 13 he started working in Photoshop doing virtual-tuning, and then creating different tutorials and websites in his non-existent free time.

See my GraphicRiver portfolio

These are free to download and you can use them in any application whether it’s personal or commercial. Please just be sure to let people know where you got the icons from. We’re offering them at 256px (PNGs) and 500px (PSDs). Download, and be sure to tell your friends to come visit the site to download their icons as well, and as a courtesy, we hope you’ll link to our site. We have a lot more great things coming!

Freebie Details

• Program: Adobe Photoshop CS4
• Version: CS4
• 15 Social Media Icons
• Sizes:256px / 128px
• Zipfile includes: PSD, PNG

DOWNLOAD THE ZIP FILE

Related posts:

1. Free Icon Pack Plus Bonus Set of Social Media Icons
2. Awesome Christmas Icon Pack Freebie!
3. Free Graphic Design Tutorials in Photoshop, Illustrator and More

In this tutorial I`ll be using Adobe Photoshop CS3 but you can use any version of Adobe Photoshop.
There is an image for every step that will be very helpful.
After you have made all the steps you`ll be able to make an original bodykit for your car using 100% brush/dodge/burn tool techniques .

Author: Pintilei Adrian-Dumitru

Pintilei Adrian-Dumitru is a graphic designer in Romania. He learned how to use graphic design software by practicing virtual-tuning projects for several years. He lives with his parents in a little village called Vorniceni but he studies at the National College A.T. Laurian in Botosani, Romania. His dream is to be an important computer-programmer in his country.

Tutorial Details

• Program: Adobe Photoshop
• Version: CS 3
• Difficulty:Intermediate

Donors

• Donors for car : Donors

Step 1: Starting the tutorial

Open a picture with a car

Step 2: Place it into a new background.

I moved the car in the new background . If you don`t know how , search for “Virtual Tuning Tutorial Part 1 ” on the Instatuts site.

Step 3: Stroke technique

Make a new layer , call it “Sketch”. Using Stroke Path technique (Brush size : 2px) make next sketch :

Step 4: Brush technique

Make a new layer , call it “Brush ” , put it under the “sketch” layer then fill it with the selected color.

Step 5: Lighting

With pen tool , make next path :

Step 6

Again use stroke technique with the white color , (Brush size : 2px size ) , then erase the bottom of the stroke :

Step 7

Using same stroke technique make all the edges.

Step 8: Pavement reflections

Select the “Background” layer , make a selection like in the next image using PEN TOOL or LASSO TOOL then , right click – Layer via copy :

Step 9

Put the selected pavement on the front bar , lower the opacity and erase a little in the bottom of the reflection.

Step 10

Like in the step 9 , copy a piece of pavement.

Step 11

Lower the opacity , and erase a little in the right part of the reflection.

Step 12

Repeat those steps for all the front bumper

Step 13: Gaussian Blur

Blur a little the white strokes using Gaussian Blur ( 0.3 px )

Step 14

Select this part . Use Feather Radius on 0.3 px.

Step 15

Right click -> Layer via copy

Step 16: Resizing

Edit-Free Transform :

Step 17: Stroke sketch

Make a new layer , make next sketch for orientation . I used pen & brush tool for the sketch. (Brush size : 2px)

Step 18

Select and fill the selection with black color (Remember , for better selections use Feather Radius : 0.3 px )

Step 19

Make next selection :

Step 20: Smudge tool

Select the “car” layer and smudge like in the next picture :

Step 21: Repeat step 20

Repeat step 20 .

Step 22: Smudging result

You should obtain something like this :

Step 23:Update sketch

I added some new elements on the sketch.

Step 24: Highlights/shadows

Make a new layer , call it “Highlights/Shadows” , select next color :

Step 25

With pen tool make next path :

Step 26:Stroke technique

Right Click – Stroke path ( Brush size : 2px)

Step 27

Erase the parts where the light can`t reach.

Step 28: Resize the stroke layer

Duplicate the “Highlights/Shadows” then resize a little.:

Step 29

Replace green color with white color.

Step 30

Lower the opacity to 40%

Step 31

Select this part (Remember , for better selections use Feather Radius : 0.3 px )

Step 32: Add Mesh

Load the selection in the picture with the mesh donor.

Step 33:

Move the selected mesh to our picture.

Step 34: Adjustements

Go to -> Image-Adjustements-Brightness/Contrast , make next settings :

Step 35: Shadows

Using Burn Tool , add some shadows in bottom of the mesh :

Step 36:

Make a new layer , with pen tool , make next path :

Step 37: Stroke technique

Set Brush size on 3px , Right click-> Stroke Path (white color , Brush size :3px)

Step 38:

Lower the opacity to 90% and erase a little the line sides.

Step 39: Intercooler

Add an intercooler . You have the car with the intercooler in the “Donors” archive.

Step 40: Adjustements

Go to -> Image-Adjustements-Brightness/Contrast , make next settings :

Step 41: Desaturate it

Go to -> Image-Adjustements-Desaturate

Step 42

In a new layer make next selection on the top of the intercooler :

Step 43:

Fill the selection with the selected color :

Step 44:Stroke technique

Using stroke technique , make a line like in the next picture :

Step 45

Lower the opacity to 38%

Step 46: Shadows

Add a shadow under the created layer.

Step 47: License plate

Add a license plate , i made this license plate , so you can use it. You have the license plate in the “Donors” archive.

Step 48

Make next shape using black color :

Step 49

Make next path using pen tool :

Step 50: Stroke technique

Right click->stroke path ( Brush size : 2px), lower the opacity :

Step 51: Highlights

Using Dodge Tool to add a little highlight on the begining of the hole.

Step 52

Go to the car layer and make next selection

Step 53: Eliminate the old reflections

Eliminate the Old reflections by smudging with smudge tool.

Step 54: Headlight effects

Select the headlight , and make next settings for brightness/contrast :

Step 55

Make same thing for the other one.

Step 56

Make next selection (Remember , for better selections use Feather Radius : 0.3 px )

Step 57

Move the selection on the bonnet , then copy and paste on the headlight :

Step 58

Same selection , in a new layer under the eyelid layer.

Step 59

Fill it with black color and blur a little :

Step 60

Add an eyelid on the other headlight

Step 61: Wheels

Add wheels ( I used same technique like in the “Virtual Tuning Tutorial Part I “. You have the wheels donor in the “Donors” archive.

Step 62: Resizing

Edit – Free Transform , fix it to look better.

Step 63

Make same thing for the back wheel :

Step 64: Sideskirt

Now let`s make the sideskirt. Make next sketch .I used pen & brush tool for the sketch. (Brush size : 2px)

Step 65: Stroke technique

with pen tool , add some strokes on the sideskirt (erase a little where the light can`t reach very good) :

Step 66: Pavement reflections

Add some pavement reflections :

Step 67: Clouds reflections

Now it`s time for clouds reflection , add on the image a cloud picture . You have the picture with clouds in the “Donors” archive.

Step 68

Erase the excess:

Step 69: Blur

Go to -> Filter -> Blur -> Motion Blur :

Step 70

Lower the opacity :

Step 71: Shadows

Add the shadows :

Step 72

Lower the opacity :

Step 73: Tailight effects

Select the tailight and go to Image-Adjustements-Channel Mixer:

Step 74

Then select the spoiler , and go to Image-Adjustements-Hue/Saturation :

Step 75: Interior

Ok. We have finished the exterior.It`s time for the interior. Let`s do it.

Step 76

In a new layer , fill the windows with a black color :

Step 77: Sport seat

Add a picture with a sport seat . You have the sport seat in the “Donors” archive.

Step 78

Using Magic Wand tool , erase the white part :

Step 79: Shadows

Erase the excess and use burn tool to add some shadows :

Step 80: Roll cage

Make next path using pen tool :

Step 81: Stroke technique

Right click – Stroke path – Brush ( Size : 14 px , 100% Hardness)

Step 82:

Erase the excess & and fit the roll cage to look more real

Step 83:

Make next selection with a 5px feather :

Step 84: Shadows

Add some shadows using Burn Tool :

Step 85: Highlights

And some highlights using Dodge Tool :

Step 86: Roll cage highlights

Add a stroke ( 2px size ) with a highlighted green :

Step 87: Blur

Go to -> Filter¬-> blur -> Gaussian Blur :

Step 88

Repeat those steps to add more rollcages :

Step 89

Into a new layer make next shape on the seat:

Step 90: Shadows/Highlights

Use Burn/Dodge tool in the indicated places :

Step 91

Duplicate the layer , and move it a little to the left :

Step 92: Effects

Right Click -> Blending Options -> Drop Shadow :

Step 93

Duplicate the seat created and move to the left.

Step 94: Front window reflections

Add some clouds on the front window:

Step 95

Lower the opacity :

Step 96: Wall reflections

Copy this part of the wall :

Step 97

Move it on the window :

Step 98

Now add the rest of the roll cage(Note : Put the roll cage layers under the reflection layers )

Step 99

Make some shapes on the windows :

Step 100

Lower the opacity :

Step 101: Make window looks more realistic

Using Pen Tool , make next path :

Step 102

Right Click -> Stroke path , make next settings :

Step 103: Clouds reflections on the side windows

Add some clouds on the side windows :

Step 104

Go to -> Image-> Adjustements-> Hue/Saturation :

Step 105

Go to -> Filter-> Blur -> Gaussian Blur :

Step 106

Make a new layer , select next parts :

Step 107

Fill the selection with the wall color

Step 108

Go to -> Filter-> Blur -> Gaussian Blur :

Final Step

Go to Image -> Adjustments -> Brightness/Contrast, and then move the contrast to the right (maximum) :

Related posts:

1. Virtual-Tuning Tutorial PART2 – Changing the BodyKit Color
2. RSS Christmas Stocking Tutorial in Photoshop
3. How to transform a car into a chop in Adobe Photoshop

This tutorial is a continuation of our tutorials: “The Basics – Photoshop Tools Part 1 of 3” and “The Basics – Photoshop Tools Part 2 of 3“

For recap, these are the tools that are discussed in part 1 and 2: Move Tool, Rectangular Marquee Tool, Elliptical Marquee Tool, Single Row Marquee Tool, Single Column Marquee Tool,Lasso Tool, Polygon Lasso Tool, Magnetic Lasso Tool, Quick Selection Tool, Magic Wand Tool, Crop Tool, Slice Tool, Slice Select Tool, Eyedropper Tool, Color Sampler Tool, Ruler Tool, Note Tool, Spot Healing Brush Tool, Healing Brush Tool, Patch Tool, Red Eye Tool, Brush Tool, Pencil Tool, Color Replacement Tool, Clone Stamp Tool, Pattern Stamp Tool, History Brush Tool, Art History Brush Tool, Eraser Tool, Background Eraser Tool, Magic Eraser Tool, Gradient Tool, Paint Bucket Tool, Blur Tool, Sharpen Tool, Smudge Tool, Dodge Tool, Burn Tool, Sponge Tool, and Pen Tool. Now, lets move forward with the list and I will discuss the Part 3, the last part of the Photoshop tutorial.

Author: Rufino Peligrino Jr.

Here is the last list of the Photoshop Tools.

Freeform Pen Tool (P)
- The Freeform Pen Tool is used to draw paths and vector shapes easily by adding anchor points automatically. Click the Freeform Pen Tool which is under the same group as the Pen Tool. Set the options to your liking in the Options bar. The options for the Freeform Pen Tool are just the same as the Pen Tool options in the Options bar except for the Magnetic option.

• The Magnetic option allows you to switch to a Magnetic Pen that clings to the edges of the contrast objects automatically.

- Click and hold your mouse button and draw like a pencil.


Add Anchor Point Tool
- The Add Anchor Point Tool is used mainly to add anchor points to anywhere in your image.


Delete Anchor Point Tool
- The Delete Anchor Point Tool is used for the main reason of deleting any anchor points in your image.


Convert Point Tool
- The Convert Point Tool is used to edit the existing paths and vector shapes by means of converting the smooth anchor points to make corner anchor points or vice versa. Click the Convert Point Tool under the same group as the Pen Tool. Then, click on any smooth anchor point in order to convert it to a corner anchor point. On the other hand, to convert a smooth anchor point back, just drag away starting from the corner anchor point.


Horizontal Type Tool (T)
- The Horizontal Type Tool is used to create and edit vector based texts inside a different layer. Click the Horizontal Type Tool below the Pen Tool. In the Options bar, you can see these following options:

• Set the options for the font: family, size, anti-aliasing, alignment, and color.
• Using this option, you can also create a warped text for your texts.
• More options will pop up when you click the Character and Paragraph panel. Set them to your desired settings.

- To create a text, make sure the tool is activated. Now, click on the part of the image that you want to put your text. Then, type in your text.


Vertical Type Tool (T)
- The Vertical Type Tool is just the same as the Horizontal Type Tool except that it types the text in a vertical manner.


Horizontal Type Mask Tool (T)
- The Horizontal Type Mask Tool is used to create a selection in a type-shaped form. The type selections can be moved, filled, stroked, and copied just like all other selections. Click the Horizontal Type Mask Tool which is under the same group as the Horizontal Type Tool. Make sure that the activated layer is the one that you want to put your text into. Set your desired options in the Options bar. The options for the Horizontal Type Mask Tool are exactly the same as the Horizontal Type Tool and Vertical Type Tool. Now, click the part of the image that you want your text. By doing this you will notice that there is some kind of a quick red mask that will cover the active layer. Type in your text and you’re done.


Vertical Type Mask Tool (T)
- The Vertical Type Mask Tool is just the same as the Horizontal Type Mask Tool except that it types the text in a vertical manner.


Path Selection Tool (A)
- The Path Selection Tool is used to move and select the components and anchors point of the existing path and vector shape masks. Click the Path Selection Tool located below the Horizontal Type Tool. Then, click at the path or shape component in the image window that you wish to select.
- To show the bounding box together with your selected path, click on the Show Bounding Box button in the Options bar.
- To move the selected path or shape component, just simply click and drag it.
- To delete a selected shape or path component, just hit the Delete key.
- In order to select two or more path and shape components, just click on the path and shape components that you want to select while holding down the Shift key.
- When two or more components are selected, you can combine or align them to make a single path using the corresponding buttons in the Options bar.

Rectangle Tool (U)
- The Rectangle Tool is used to create rectangular paths and shapes. Click the Rectangle Tool located below the Path Selection Tool to activate it. In the Options bar, you can see the following options:

• The Shape Layers option allows you to create shape layers.
• The Paths option allows you to draw paths or shape outlines.
• The Fill Pixels option allows you to make rasterized shapes in the current layer.
• To set the Geometry options, click on the button.
• Set the color for the shape that you create.
• When you want to create multiple shapes, use these options:
  • The create new shape layer option allows you to create a new shape within a separate layer.
  • The Add to shape area option allows you to create many shapes using the same layer.
  • The Subtract from shape area option allows you to subtract shapes in your current shape layer.
  • The Intersect shape areas option allows you to intersect in existing shapes using the same layer.
  • The Exclude overlapping shape areas option allows you to create a new shape using the current layer by subtracting overlapping areas.
• You can also add styles to your created shape layers by choosing one in the Style picker option.
• Meanwhile, when you want to create paths, you can choose from these options:
  • The Add to path option allows you to create multiple paths in the same layer.
  • The Intersect to path area option allows you to intersect in existing paths in the same layer.
  • The Exclude overlapping path areas option allows you to create a new path using the current layer by subtracting overlapping areas.
• On the other hand, when using the Fill Pixels option, you must set the Blending mode and the Opacity option to your liking.

- To create a shape or path, just simply click and drag into your image.


Rounded Rectangle Tool (U)
- The Rounded Rectangle Tool is used to create rectangular paths and shapes but with rounded corners. Click the Rounded Rectangle Tool which is under the same group as the Rectangle Tool. The options and instructions for the Rounded Rectangle Tool is exactly the same as the Rectangle Tool except for just one option, the Radius option.

• The Radius option allows you to set the amount of the corner rounding.

Ellipse Tool (U)
- The Ellipse Tool is used to create elliptical paths and shapes. Click the Ellipse Tool that is located under the same group as the Rectangle Tool. And also, the Ellipse Tool options are just the same as the options for the Rectangle Tool. The only difference is the fact that it creates an ellipse instead of a rectangle.


Polygon Tool (U)
- The Polygon Tool is used to create polygonal paths and shapes. Click the Polygon Tool which is under the same group as the Rectangle Tool. The options and instructions for the Polygon Tool is exactly the same as the Rectangle Tool except for just one option, the Sides option.

• The Sides option allows you to set the number of sides for your polygon.

Line Tool (U)
- The Line Tool is used to create line paths and shapes. Click the Line Tool which is under the same group as the Rectangle Tool. The options and instructions for the Polygon Tool is exactly the same as the Rectangle Tool except for just one option, the Weight option.

• The Weight option allows you to set the width of the line that you want to create.

Custom Shape Tool (U)
- The Custom Shape Tool is used to create custom shapes and paths. Click the Custom Shape Tool which is under the same group as the Rectangle Tool. The options and instructions for the Custom Shape Tool is exactly the same as the Rectangle Tool except for just one option, the Shape picker option.

• The Shape picker option allows you to choose various different kinds of shapes.

Hand Tool (H)
- The Hand Tool lets you navigate around an image. Click the Hand Tool which is located below the Shape Tool group. In the Options bar, you can see the following options:

• There are four standard viewing modes that you can select. The Actual Pixels, Fit Screen, Fill Screen, and Print Size.

- Click on the image and drag to move around the image area.


Rotate View Tool (R)
- The Rotate View Tool is used to rotate an image without transforming it. Note: It only works when OpenGL is enabled. Click the Rotate View Tool which is under the same group as Hand Tool. You can click and drag to rotate the image. A compass will then appear to indicate the north of the image no matter what is the angle of your image. Or, you can enter a value in the Rotation option to indicate the degrees of shifting. Or lastly, you can click and drag the Set Angle of Rotation option to control the view. If you want to view the original view of the image, click the Preset View button.


Zoom Tool (Z)
- The Zoom Tool is used zoom in and zoom out of your image. In using the Zoom Tool, every click allows you to magnify or reduce the image view to the next percentage and it centers the display to the point where you click. The maximum magnification level is 3200%, in which after that percentage, the magnifying glass will appear empty.
- Click the Zoom Tool located below the Hand Tool. As default, the pointer looks like a magnifying glass having a plus sign on its center. Then click on the center of the image area to magnify it. To reduce or zoom out the view, click the zoom out icon in the Options bar, and then click on the center of the area of your image that you want to reduce the view. Or you can just simply click on the center of the image area where you want to zoom out while holding down the Alt key for Windows or Option key for Mac.
- In the Options bar, you can see these following options:

• The Resize Windows To Fit option allows you to resize your image to a better fit when you are using the Zoom Tool.

- There are four standard viewing modes that you can select. The Actual Pixels, Fit Screen, Fill Screen, and Print Size.

If ever you missed the part 1 and 2 of this tutorial, just click on the links below to view them.

Part 1

Part 2

Part 3

Related posts:

1. The Basics – Photoshop Tools Part 2 of 3
2. The Basics – Photoshop Tools Part 1 of 3
3. Create a Print Ready Business Card in Photoshop

This tutorial is a continuation of one of our tutorials: “The Basics – Photoshop Tools Part 1 of 3“.

Part 1 talks about the importance of basics in graphic designing. I point out lists of Photoshop Tools and its features. For recap, these are: Move Tool, Rectangular Marquee Tool, Elliptical Marquee Tool, Single Row Marquee Tool, Single Column Marquee Tool,Lasso Tool, Polygon Lasso Tool, Magnetic Lasso Tool, Quick Selection Tool, Magic Wand Tool, Crop Tool, Slice Tool, Slice Select Tool, Eyedropper Tool, Color Sampler Tool, Ruler Tool, Note Tool, Spot Healing Brush Tool, Healing Brush Tool and Patch Tool. Once again, these tools are just basics but they aren’t enough, there are still a lot of things to learn aside from this. So guys, lets move forward and I will discuss the Part 2 of it.

Author: Rufino Peligrino Jr.

Below is the second list of the basic Photoshop Tools. Enjoy!

Red Eye Tool (J)
- The Red Eye Tool is used to remove red eye in your flash photos. Click the Red Eye Tool which is under the same group with the Spot Healing Brush Tool. And then click on the red eye to fix it.
- In the Options bar, you can see this options when the Red Eye Tool is activated:

• The Pupil Size option is the one responsible for the area that is affected by the Red Eye Tool.
• The Darken Amount option defines the darkness of the Red Eye Tool correction.

Brush Tool (B)
- The Brush Tool allows you to draw lines with different colors and thicknesses. It acts as a freehand painting tool. Select the Brush Tool located below the Spot Healing Brush Tool.
- In the Options bar, you can see these following options when the Brush Tool is activated:

• In the Options bar, set the brush size according to the size that you want. Then, select a color to your liking in the Swatches palette. Click on the image and start painting by holding your mouse button down.
• The Mode option is the blending mode. Mostly, the Normal option is used. But you can experiment on each mode to know what they can do.
• The Opacity option for the brush paints with strokes that are transparent allows viewing the underlying content or image to be seen.
• The Flow option defines the quickness of applying the paint. The lower the value of the Flow option, the lighter the strokes.
• The Airbrush option is used to gradually tone your images.

Pencil Tool (B)
- The Pencil Tool is similar to the Brush Tool except that it only has hard edges.


- The Options bar for the Pencil Tool is also similar with the Brush Tool but without the Airbrush option and it has an additional option which is the Auto Erase option.

• The Auto Erase option lets you use the Pencil Tool like Eraser Tool. It allows you to paint the background color above the areas having the foreground color.

Color Replacement Tool (J)
- The Color Replacement Tool is used in order to replace or swap particular colors that you paint on, covering a targeted color by a corrective color. Choose the Color Replacement Tool which is under the same group with the Brush Tool and Pencil Tool.
- In the Option bar, you can see these following options:

• You can set the brush size and brush style to your desired settings.
  
  
  
  and
  
  
  
• In the Sampling option, you can either choose:
  • Continuous – Continuously samples colors while dragging.
  • Once – Only replaces the color that you first click.
  • Background Swatch – Only replaces color from the areas which contains the active background color.
• In the Limits option, you can either choose:
  
• Discontiguous – Replaces or switches the sampled color when it occurs in the pointer.
• Contiguous – Replaces or switches colors which are contiguous along with the color instantly under the pointer.
• Find Edges – Replaces or switches the associated areas that contain the sampled color at the same time preserving the sharp edges’ sharpness.
• The Tolerance option defines the tool’s sensitivity.
  
• The Anti-alias option softens the edge of the selection.
  

- After setting the necessary option, select the foreground color that you want to replace the undesired color. Then, click on the color that you want to swap or replace in your image, and drag to paint.

Clone Stamp Tool (S)
- The Clone Stamp Tool lets you paint an area of an image over the sampled area or pixels. It is also used to duplicate image or a part of it. The actual operation requires you to set up a sampling point within your image that will be used to be the reference in order to make a cloned area.
- Click the Clone Stamp Tool located just right below the Brush Tool. And then, set your desired settings in the Options bar.

• As you can see, the options for the Clone Stamp Tool are just the same as the options in the Brush Tool with the additional Aligned and Use All Layers options.
  
• The Aligned option makes your starting spot to follow your cursor. Meaning, it will continuously draw your new cloned image even after you release your mouse button.
• The Sample Option allows you to sample data from active or current layer, current layer and below it, and from all layers.
  • To sample from all layers excluding the adjustment layers, select the All Layers option and click the icon for Ignore Adjustment Layers.

- After setting up the options, click on your image the point that you want to set your sampling point as a reference while holding down the Alt key for Windows and Option key for Mac. Now, click and draw to where you want your cloned image to be show up. Then all you have to do is to drag your cloned image to where you want it to be.


Pattern Stamp Tool (S)
- The Pattern Stamp Tool allows you to paint using a pattern. Click on the Pattern Stamp Tool which is under the same group as the Clone Stamp Tool.

- Next step is to select a brush in the tool’s Brush Presets picker and set its size and hardness. Set the options in the tool’s Options bar. The Pattern Stamp Tool options are just the same as the options for the Clone Stamp Tool except for the Pattern pop up panel and the Impressionist option. Then, pick a pattern that suits your design in the Pattern pop up panel. Lastly, drag the image to where you want to paint the pattern.


History Brush Tool (Y)
- The History Brush Tool is used to paint in your image its history or previous state. It acts just like the History panel or by pressing Ctrl+Z that undoes your action but the undo action only applies to the stroked area that you paint. Click the History Brush Tool located below the Clone Stamp Tool. Set the settings to the Options bar to your liking. The options for the History Brush Tool are also the same as with The Brush Tool’s options.


Art History Brush Tool (Y)
- The Art History Brush Tool is used to paint stylized strokes by means of a specific history state. It is just like the History Brush Tool but instead of re-creating the source data that you selected, the Art History Brush Tool makes use of that source together with the options that you’ll set in order to create various colors and creative styles. Click on the Art History Brush Tool which is under the same group as the History Brush Tool. Set the options on the Options bar to your desired settings.

• Set the brush options on the Brush Presets panel.
• Next is to select a mode to your desired blending mode.
• To control the paint stroke’s shape, select the necessary option from the Style options.
• The Area option defines the area that is covered with the paint strokes.
• The Tolerance option defines the tool’s sensitivity.

- Next is to set the source by selecting a state or snapshot at the History panel. Then, you can now paint in your image by clicking and dragging.


Eraser Tool (E)
- The Eraser Tool, just like the name implies, erases the current layer pixels by dragging it along the image. Specific pixels on the image can be erased to either transparency or background color. It automatically changed to background color if the transparency is locked. Also under this tool are the Background Eraser Tool and the Magic Eraser Tool.
- Click the Eraser Tool located below the History Brush Tool. Next is to set the color of the background if you want to erase with the background or the layer’s transparency is locked.

• In the Option bar, select your desired settings for the brush, mode, opacity, flow, and airbrush options. We already tackled all of those options on the previous Tools.
• The Erase to History option is used to erase a history state or snapshot of your image. Select the history state in the left column of the History panel.

- Lastly, click and drag on the area that needs to be erased.


Background Eraser Tool (E)
- The Background Eraser Tool is used to erase the background color of an image to transparent. Click the Background Eraser Tool which is under the same group as the Eraser Tool. Select a layer that you want to erase a background in the Layers palette.
- In the Options bar, you can see these following options:

• In the Brush Preset picker, set the Diameter, Hardness, Spacing, Angle, Roundness, Size, and Tolerance to your desired settings.
  • In the event that you are working with some sort of pressure-responsive digitizing tablet, select the Size and Tolerance options to adjust the size as well as the tolerance of the eraser over the path of the stroke. Select the Pen Pressure option in order to base your adjustment on the pen pressure. Meanwhile, select the Stylus Wheel in order to base your adjustment on the pen thumbwheel’s position.
• The Sampling, Limits and Tolerance option is just the same as the Color Replacement Tool’s Sampling, Limits and Tolerance option.
• The Protect Foreground Color is used to prevent erasing the pixels that matches the color of the foreground.

- Now, click and drag to the area that you want to make your erasure.


Magic Eraser Tool (E)
- The Magic Eraser Tool works just like the Magic Wand Tool except that it automatically deletes the selection part instead of just selecting it. Click the Magic Eraser Tool under the group of the Eraser Tool.

• Set the options in the options bar. It is very similar to the Magic Wand Tool’s options.

- Then, after everything is set up, click on the pixel to erase the area that has the same pixels to transparent or background color if ever you are with a locked transparency layer.


Gradient Tool (G)
- The Gradient Tool allows you to apply a gradient fill on to a layer or a selected or specific area of your image. It also creates a gradual mix of multiple colors. If you want to fill to a selected area of your image, select first the area before starting or else It will be applied to the entire layer. Now, click on the Gradient Tool located below the Eraser Tool. In the Options bar, you can set these following options:

• Select a gradient fill
  • The Gradient picker allows you to select a gradient fill preset. Just click on the small downward triangle to open the Gradient picker.
  • The Gradient Editor can be accessed by clicking the gradient sample (the rectangle) located before the small triangle. It allows you to create your own gradient fill rather that just selecting on the gradient fill presets.
• Here are some options on how to apply the gradient fill.
  • In the Linear Gradient option, the shades from the initial point towards the ending point are within a straight line.
  • Meanwhile, the Radial Gradient option, the shades are in a circular outline.
  • In the Angle Gradient option, the shades from the initial point are in a manner of counterclockwise sweep.
  • In the Reflected Gradient option, the shades from the either side part of the initial point are in a symmetric linear gradient.
  • Lastly, the Diamond Gradient option. Its shades are in a diamond shape pattern which outwards from the initial point.
• Next step is to set your desired options for the Blending Mode and Opacity.
• The Reverse option allows you to reverse the gradient fill’s color order.
• The Dither option allows you to create smoother gradients.
• The Transparency option enables the transparency mask in your selected gradient fill.

- Click on the part of your image that you want to define your initial point. Then drag and release to define the gradient’s ending point.
- You can constrain the angle of the line to 45° multiples by holding down the Shift key while dragging.

Paint Bucket Tool (G)
- The Paint Bucket Tool is used to fill, using the foreground color or a pattern, the adjacent pixels that has the same color. Click the Paint Bucket Tool which is located under the same group as the Gradient Tool. In the Options bar, set the necessary options for you design.

• Choose whether to use the foreground color or a pattern in filling the selection.
• Next, set to your desired liking the Blending Mode, Opacity, Tolerance, Anti-alias, Contiguous and All Layers.

- Then, click the pixel or an area of your image to fill that part of the area.
Blur Tool
- The Blur Tool is used blur the hard edges of your image. The more you use the blur tool over a specific area, the more blurry it becomes. Click on the Blur Tool below the Gradient Tool. In the Options bar, set your desired options:

• I already talked about all of those options in the previous posts except for the Strength option.
• The Strength option is defined by the tool’s sensitivity.

- Lastly, click and drag to the part of the image that you want to blur.


Sharpen Tool
- The Sharpen Tool is used to sharpen the images by increasing the contrast along the edges. The more you use the tool in a specific area, the more sharpen it becomes. Click on the Sharpen Tool which is under the same group as the Blur Tool. Set your desired settings in the Options bar. The options for the Sharpen Tool are just the same as the options for the Blur Tool. Then, after setting the options, click and drag to the part of the image that you want to sharpen.


Smudge Tool
- The Smudge Tool is used to spread and mix the content of the areas of your image. It picks up color in the initial spot to where the stroke starts and pushes it to the direction that you drag. Click the Smudge Tool which is also under the same group as the Blur Tool. Set the options in the Options bar to your liking. The options for the Smudge Tool are also the same as the Blur Tool except for one which is the Finger Painting option.

• The Finger Painting option allows you to smudge at the starting of your stroke using the active foreground color instead of using the color of the starting spot of your stroke. You can also activate the Finger Painting option by holding down the Alt key for Windows or Option key for Mac while dragging.

Dodge Tool (O)
- The Dodge Tool is used to lighten image areas. The more you use the Dodge Tool over a specific area, the lighter it becomes. Click the Dodge Tool located below the Blur Tool. In the options bar, you can see these following options:

• Select a brush in the brush panel and set the size and hardness of the brush.
• In the Range option, you can choose:
  • The Midtones option allows you to change the grays’ middle range.
  • Shadows option allows you to change the dark areas.
  • The Highlights option allows you to change the light areas.
• The Exposure option defines the strength of the stroke.
• If you want to use airbrush, click on the airbrush icon.
• The Protect Tones option allows you to minimize the clipping in the highlights and shadows.

- Click and drag to the part of the image that you would like to lighten.


Burn Tool (O)
- The Burn Tool is used to darken image areas. It is the exact opposite of the Dodge Tool. The instructions on how to use this tool is just the same as the Dodge Tool. It is under the same group as the Dodge Tool.


Sponge Tool (O)
- The Sponge Tool is used to change the level or degree of saturation regarding the color of an image’s area. Click the Sponge Tool which is located under the same group as the Dodge Tool and Burn Tool. In the Options bar, you can see these following options:

• Select a brush in the brush panel and set the size and hardness of the brush.
• The Mode option lets you choose to whether saturate or desaturate.
• Set the Flow to your liking. The lower the value of the Flow option, the lighter the strokes.
• If you want to use airbrush, click on the airbrush icon.

The Vibrance option enhances the Sponge Tool’s effectiveness. It minimizes clipping.

- Click and drag to the part of the image that you would like to saturate or desaturate.


Pen Tool (P)
- The Pen Tool is used to create a straight lined or smooth curved paths and vector shapes. Click the Pen Tool located below the Dodge Tool.


– In the Options bar, you can select to either draw Shape Layers or Paths.
- Click on the part of your image that you want to be the starting anchor point. Then, set a second anchor point in order to your segment.
- Then, click and drag to be able to add a new segment and change the shape of the line.
- The Auto Add/Delete option in the Options bar lets you add or delete anchor points.
- To add a new anchor point, just click on to where to put it.
- And to delete an existing anchor point, just simply click on it. Or to delete the previous anchor points that you added, just hit the Delete key.
- Then, to complete the path or a shape, click on the starting/first anchor point.

This is not yet done, there’s still part 3 after this. So, watch out guys.

Part 1

Part 2

Part 3

Related posts:

1. The Basics – Photoshop Tools Part 3 of 3
2. The Basics – Photoshop Tools Part 1 of 3
3. Virtual-Tuning Tutorial PART2 – Changing the BodyKit Color

One of the most powerful and the leading, industry standard software on image and graphics editing or creation is the Adobe Photoshop, or merely Photoshop. If you’re just starting to learn about Photoshop, you might know some of its tools and basic editing tasks like resizing and cropping but to be able to fully understand and master all of its tools takes a lot of time. That’s the reason why the main purpose of this Photoshop Tutorial is to help you learn the basics of Photoshop (starting with Photoshop tools) for you to get started with it. People tend to skip the basics or the fundamentals and start on learning the advanced Photoshop tutorials which they thought is easier. But they’re wrong. Jacob Gube once said, “If you take the time to learn the basics, you’ll run into less trouble because you understand how things work.”

Author: Rufino Peligrino Jr.

The first part of this Photoshop tutorial is to know the basic Photoshop tools. Here’s the full list of Photoshop tools with its corresponding shortcuts, descriptions and features. The shortcut keys are inside the parenthesis ( ).

Move Tool (V)
- The Move Tool is used, apparently, to move a selected area/image or layer. Click to select the Move Tool located at the top portion of your Photoshop Toolbox. You can also select the Move Tool by holding on your keyboard the Ctrl key for Windows and Command key for Mac.
- In order to move a selected image/area, click on the selection (while the Move Tool is activated), hold it down, then drag it to the desired location and drop.
- Now, to move a layer, same thing for the selection, just click the layer, hold, drag, and drop.
- You can also use the arrow keys in your keyboard to precisely move the layer or selected image/area.
- While moving a layer or selection, hold down the Shift key to limit the movement to horizontal or vertical.


Rectangular Marquee Tool (M)
- The Rectangular Marque Tool, one of the 4 marquee tools, is used to make rectangle selections. Select the Rectangular Marquee Tool at the top of the Photoshop Toolbox just below the Move Tool. Right click on the marquee tool icon to view the four marquee tools.
- To make a rectangle selection, activate the Rectangle Marquee Tool and click on the area/image and drag.
- To constrain the selection to a perfect square, just simply hold down the Shift key while selecting.
- When you select a specific tool, there are options that will appear on Options bar located just below the menu bar.

• The new selection option will make a new selection and delete the current selection.
• The Add to selection option lets you add another area to an existing selection. You can also activate the Add to selection option by holding the Shift key while you are selecting.
• The Subtract from selection option helps you to subtract a specific area on the existing selection. You can also activate it by holding Alt key for Windows or Option for Mac, while you are selecting.
• The Intersect with selection option is used to intersect a specific area within the existing selection. Hold down Shift+Alt for Windows and Shift+Option for Mac to activate it through keyboard.

Elliptical Marquee Tool (M)
- The Elliptical Marquee Tool is another type of marquee tool that makes elliptical selections. The features of this tool are pretty much the same as Rectangle Marquee Tool except for the fact that it creates elliptical selections rather than rectangles.
- Press the Shift key down while selecting to constrain your selection to a perfect circle.
- The options on the Option bar for the Elliptical Marquee Tool are just the same with Rectangle Marquee Tool.


Single Row Marquee Tool
- The Single Row Marquee Tool is used to create a horizontal selection of one pixel high. Also, all wide row selections for image can be created using this tool. It is one of the Marquee tools so its features and options are the same.


Single Column Marquee Tool
- Single Column Marquee Tool is the same as Single Row Marquee Tool, only it is now used to create one pixel high vertical selections.


Lasso Tool (L)
- The Lasso Tool allows you to create freehand selections. To make a selection, just click on the Lasso tool (just below the Marquee tools), then click on where you want to start your selection and draw your desired selection while holding your mouse’s left button. To complete your selection, just release the button. There are 3 Lasso Tools that are available. Just right click or hold down the left click to view them all.


Polygon Lasso Tool (L)
- The Polygon Lasso Tool is like the Lasso tool, but instead of holding down your mouse button while you draw your selection, you just have to click on various points to make a selection. It’s just like creating polygon selections. To complete the selection, click on the starting/first point of your selection or just double left-click at any point.


Magnetic Lasso Tool (L)
- The Magnetic Lasso Tool is used to create a selection, automatically clinging to the edges of the defined area of the contrast objects. Click on the Magnetic Lasso Tool, click at the image to create your starting point. Move the mouse on the edges of the object. The tool will create fastening points that clings at the edges. You can manually put a fastening point by clicking the desired key point. To complete the selection, click on the starting/first point of your selection or just double left-click at any point.
- When you select the Magnetic Lasso Tool, you can see these following options at the options bar:

• The Width is responsible for the tool’s range of detecting edges.
• The Contrast is responsible for the tool’s sensitivity.
• And the Frequency is responsible for the amount or how often the fastening points the tool will set.

Quick Selection Tool (W)
- The Quick Selection Tool, one of the two Color Selection Tools, is used to quickly create/select a defined area. Select the Quick Selection Tool just below the Lasso Tools and simply click on the area that you want to select or to be included in your selection. Right click on the icon to view the two Color Selection Tools.
- While activating the Quick Selection Tool, you can see these following options at the Option bar:

• The Brush Picker Option lets you adjust the Diameter, Hardness, Spacing, Angle, and Roundness of the brush depending on the specifications of the object that you want to select. In addition, you can increase the brush size by pressing the ] key and [ key to decrease it.
• The Sample All Layers Option lets you select from all the layers rather than the selected layer.
• The Auto-Enhance Option allows you to automatically smoothes the edges of the boundary of you selection.
• The Refine Edge Option refines your selection and views it against a neutral background in order for you to clearly see how the selection will look. When you click the Refine Edge icon, you will these following options:
  
  • The Radius Option defines the size of the selection’s area where the refinement of the edge occurs.
  • The Contrast Option is the one that sharpens the selection’s edges.
  • The Smooth Option defines the irregularities in the boundary of the selection.
  • The Feather Option creates faded transition from your selection to the background or area outside of the selection.
  • The Contract/Expand Option contracts or expands the selection’s boundary.
  • The five options below the sliders allow you to select on how to preview your selection. The descriptions of each option are located just right below it in Photoshop.

Magic Wand Tool (W)
- The Magic Wand Tool selects an area or all objects in an image with the same/similar color, stroke color, stroke weight, blending mode, or opacity. While the tool is activated, make a selection by simply clicking the image. The Magic Wand Tool is the second Color Selection Tool.
- While activating the Magic Wand Tool, you can see these following options at the Option bar:

• The Tolerance is responsible for the sensitivity of the tool. The higher the tolerance, the wider the selection.
• Contiguous option selects the areas that are only joined together.
• Sample All Layers option is the same as with the Quick Selection Tool.

Crop Tool (C)
- The Crop Tool enables you to cut out a specific area by discarding or deleting everything outside the selection. It is located below the Color Selection Tools. Click on the Crop Tool and click on the image, then draw a rectangle selection by holding down your mouse’s button. When you release your mouse button, your selected area will have a bounding box. You can move, rotate or resize the selected area. To move it, click on the selected area, hold the mouse button and drag it. To rotate it, click outside the selection area, hold the mouse button and drag. And finally to resize the selection, just click on the selection handles, hold and drag.
- To perform or apply the crop, just press the Enter key. And to discard the process, just hit the Esc key.
- In the Option bar, you can pre-define the target image’s size. Just fill in the Width, Height and its Resolution fields.

Slice Tool (C)
- The Slice Tool lets you to cut images into smaller pieces which fit together. It is usually used for website designing. This tool is under the same group with the Crop Tool. Just right click on the Crop Tool to view it. Click on the Slice Tool to activate it. Click and drag the area that you want to slice and release your mouse button.
- While selecting the Slice Tool, you can see the following options on the Option bar:

• The Fixed Aspect Ratio option is used to create pre-defined proportion slices. You just have to set your preferred values of Width and Height.
• The Fixed Size option allows you to create pre-defined size slices. Again, you just have to fill in the Width and Height values.

- After making the slice, right click on it to show the context menu of the tool. By this, you can gain access to the available commands in Photoshop.


Slice Select Tool (C)
- The Slice Select Tool allows you to select, move, and resize the slices that you made. This tool is also under the same group as the Crop Tool. Click the Slice Select Tool and select the slice that you want to move or resize. To move it, click on the slice and drag it. To resize it, click on the slice handles and drag it.


Eyedropper Tool (I)
- The Eyedropper Tool is useful when you want to change your foreground or background color. Click on the Eyedropper Tool just below the Crop Tool. On the Eyedropper Tool, there are 3 other tools under this group, the Color Sampler Tool, Ruler Tool and Note Tool.
- While the Eyedropper Tool is activated, click on the color of the image that you want the foreground color to be.
- If you want to change the background color, just click on the color of the image that you want while holding the Alt key.
- You can see these following option in the Options bar:

• The Point Sample option allows you to pick up the color on the pixel that you clicked on.
• All of the other samples from the options read the average values from the larger areas.

Color Sampler Tool (I)
- The Color Sampler Tool is used to sample color values from a single pixel of your image. Click on the Color Sampler Tool and click on the page or image where your first sampler will be set. It will then show the color channel values in your Info palette. You only have up to 4 samples to be set on your image.
- In order to delete one of your samples, just hold Alt key and click on the sample.


Ruler Tool (I)
- The Ruler Tool or previously Measure Tool is used for calculating the distances and angles between two points in your work area. Select the Ruler Tool and click on one point of your work area and drag it to the other point.
- In your Options bar, you can see the tool’s measuring data:

• The, and Y are the starting point’s coordinates.
• The W is the width or horizontal length.
• The H is the height or vertical length.
• A is the angle that is relative to axis.
• L1 is the total length of the first line.
• L2 is the total length of the second line.

- To constrain the Ruler Tool to increments of 45 degrees, just hold down the Shift key while making your measurements.

Note Tool (I)
- The Note Tool is used for posting or attaching notes to your image. Click the Note Tool and click on the image on where you want to put the note. Type in your text and then close the note.
- You can see the following options in the Option bar:

• In here, you can change the Author’s name and set your notes color.

- To edit your notes, double click on the note and edit it.
- To delete it, click on the note that you wish to delete and press the Delete key.
And to delete all your notes, just click the Clear All button on the Options bar.
- Remember, to include notes in your image, don’t forget to save your images in PSD format.


Spot Healing Brush Tool (J)
- The Spot Healing Brush Tool will automatically sample the pixels around the spot and matches its texture, transparency, shading and lighting to the pixels to be healed.
Select the Spot Healing Brush Tool located below the Eyedropper Tool. Click on the area that you want to be healed, or you can click and drag the area to smoothen the imperfections of a larger area.
- In the Options bar, you can see these following options:

• The Brush Picker Option lets you adjust the Diameter, Hardness, Spacing, Angle, and Roundness of the brush depending on the specifications of the area that you want to fix. In addition, you can increase the brush size by pressing the ] key and [key to decrease it.
• For the Mode, select the Replace option to maintain the noise, grain, and texture of the brush stroke’s edges.
• The Proximity option uses the pixels around edges of the brush to do the fixing.
• The Create Texture option uses the pixels inside the brush to fix the image or area by creating a texture.

Healing Brush Tool (J)
- The Healing Brush Tool is used to fix or retouch images such as blemishes, scratches, and other image imperfections by using sampled pixels. This tool works similarly with the Spot Healing Brush Tool. The only difference is, instead of automatically sampling the pixels around the spot, it requires you to define a sample spot to be the source. The Healing Brush Tool is under the same group with the Spot Healing Brush Tool.
- To define a sample spot, just hold down the Alt button and click on the image you want to be the source.
- The options in the Option bar for Healing Brush Tool are also similar with Spot Healing Brush Tool. With just only slight differences.

• Choose the Sampled option to retouch or fix your image using sampled pixels.
• Choose the Pattern option to retouch or fix your image using a pattern.
• The Aligned option makes your starting spot to follow your cursor.

Patch Tool (J)
- The Patch Tool is the same as the Healing Brush Tool that uses a patch instead of a brush. (Under the same group with the Spot Healing Brush Tool)


- Click the Patch Tool in the Toolbox. Just like with the Lasso Tool, select the area that you want to fix if you are using the Source mode in the Options bar and drag the selection to your source area. But if you select the Destination mode, select your source area, click it and drag it to the area that you want to fix. You can also use a pattern to fix your image by selecting the Pattern option in the Options bar.

This is still incomplete, if you want to know more, then click the links below.

Part 1

Part 2

Part 3

Related posts:

1. The Basics – Photoshop Tools Part 3 of 3
2. The Basics – Photoshop Tools Part 2 of 3
3. Virtual Tuning Bodykit Using Brush Techniques in Photoshop

In this tutorial I`ll be using Adobe Photoshop CS3 but you can use any version of Adobe Photoshop. This website tutorial can be followed by anyone, but was meant to be extremely basic for beginners wanting to learn the basics of design while learning how to design a website. There is an image for every step that will be very helpful. In this tutorial, use your imagination and let creativity take over. Have fun!

Author: Pintilei Adrian-Dumitru

Pintilei Adrian-Dumitru is a graphic designer in Romania. He learned how to use graphic design software by practicing virtual-tuning projects for several years. He lives with his parents in a little village called Vorniceni but he studies at the National College A.T. Laurian in Botosani, Romania. His dream is to be an important computer-programmer in his country.

Tutorial Details

• Program: Adobe Photoshop
• Version: CS3
• Difficulty: Beginner

Step 1: Make new document

Start by making a new document with the following dimensions :

Step 2: Layers

Make a new layer ( Ctrl+Shift+n) :

Step 3: Make a Selection

Make next selection with Rectangular Marquee Tool :

Step 4: Fill

Fill the selection with white color , right-click on the layer-> blending options -> gradient overlay :

Step 5: Result so far

You should have something like that :

Step 6: Make another selection

Make next selection with Rectangular Marquee Tool :

Step 7: New Layer

Make another layer :

Step 8: Fill with color

Fill the selection with the color #242424 :

Step 9: Select the foreground color

Select the foreground color #242424 :

Step 10: Select the background color

And now the background color #5f5f5f :

Step 11: Make the wood texture

Filter-> render -> fibres :

Step 12: Gradient Overlay

Right click on the layer with the fibres , make next settings :

Step 13: Rectangular Marquee Tool

Make next selection with Rectangular Marquee Tool :

Step 14: Another new layer

Make a new layer :

Step 15: Select the color

Select next color #f3f3f3 :

Step 16: Stroke path

Step 16 : Right click on the selection – > Stroke path ( 4x brush size )

Step 17: Make some lines

Than make another lines like those :

Step 18: New Layer

Step 18 : Make a new layer :

Step 19: Positioning the layers

Put the layer under the Line layer :

Step 20: Make selection

Make next selection with Rectangular Marquee Tool :

Step 21: Orange color

Use next color #fd6802 :

Step 22: Fill selection

Fill the selection with the orange color :

Step 23: Effects

Right click on the layer -> Gradient overlay -> Make next settings :

Step 24: Adjust gradient

Opacity – 31% , reverse , 90 degrees :

Step 25: Result

You should have something like this :

Step 26: Adding images

Add a little image :

Step 27: Adding left column text

Now , start to add the text :

Step 28: Add body text

Add the text in that mode :

Step 29: Adding thumbnails

Add thumbnail for every column :

Step 30: Effects

Right click on a thumbnail layer -> stroke , make next settings :

Step 31: Take a look

Step 31 : You should obtain something like that :

Step 32: Adding the buttons

Add the buttons (I added some simple text buttons), You can change the color for the home button (put it on italic , underline it), otherwise, you can change the color of the home button by using CSS:

Step 33: Effects

Right click on the layer with the buttons , Blending options -> Outer glow , make next settngs : :

Step 34: Site name

Add the name of the site :

Step 35: Add Effects

Right click on the layer-Blending options – Drop Shadow , make next settings:

Step 36: Review Text

You should have something like this:

Step 37: Add effects to buttons as well. If you want to

Make same settings for the buttons :

Step 38: Slice Tool

Select Slice Tool :

Step 39: Select Home

With slice tool, select Home button:

Step 40: Edit slice options

Right click -> Edit Slice Options :

Step 41: Select

Step 41 : Select About us button :

Step 42: Slice Options

Right click -> Edit Slice Options :

Step 43: Save

File -> Save for web&devices :

Final result

Related posts:

1. Video Tutorial on How to Design a Website in Photoshop
2. Video on How to Design a Website in Photoshop – Part 2
3. Magnifying Glass with Photo Zoom Effect in Adobe Photoshop