07.17
Learning how to design interfaces can be an enduring journey if you have to do it alone. My name is Tim Silva, and I have been attempting to design these types of interfaces for over 5 years now, and I have lots of valuable information to share with you to speed up and ease the learning process. Here is what I have come to understand about designing detailed, realistic, and cool looking interfaces: You have to be great in many areas of Photoshop to be good at interface design. So along with the actual steps needed to create this particular interface, in this series I will also provide as many references to other tutorials, resources and concepts as possible. That way, you can have access to some of the tools that will allow you to create completely original interfaces utilizing the same methods I teach in collaboration with your own creativity. Let’s move on with Part 2 of this two part series.
Step 1
Let’s review and plan. We got this far. Next, we will start to fill out the screen area. Blue is the safest cool color to use. As an experienced interface designer, I am still completely in love with it.
Step 2
Hide the two inner screen areas. In Part 1, I labeled them “Inner” and “Inner_Screen.”
Repeating the method taught in Step 37 of Part 1, create a 2-3 pixel white reflection at the bottom of the base Layer. I used multiple layers to end up with a result that I was happy with. Use the Eraser Tool (E) with a Brush Size of 75px and a Hardness of 0% to clean up any pixelation you might run into.
From here, continue ahead to create 1-3 pixel black indents on the tops and sides of the shape. The left side should be thicker and more complex while the right side will be thinner and more simplistic due to the light source. None of the following effects were created using Layer Styles. Everything is from 1-3 pixel slivers that I moved, adjusted, and cleaned up manually. I used about 20 Layers worth of tiny details here. As I explained in Step 49 of Part 1, these types of details “aren’t hard to [create], they just take time.” Take your time with the details and match these results as closely as you can.
Step 3
Next we will add some dark shadows and gradients. Add a Drop Shadow outside and to the left of the shape’s base. Additionally, put some dark gradients at the bottom coming upwards.
Step 4
Like always, the brighter effects come after the darker effects. Utilizing the same methods as Step 3 (from Part 2), add some white gradients to the design. Repeat the 2nd, 3rd and 4th sentences of Step 46 from Part 1 to create highlights on the left side and the top of the shape.
Step 5
Now we can move onto the outer-most Inner screen. Unhide both of the inner base layers, and fill the inner most one with a temporarily flat blue color of #38a6de.
Step 6
Repeat Steps 2 through 4 again to create similar effects on the outer-most inner base Layer. Note the white gradient at the very bottom (outside of the shape), the dark gradients at the top and bottom of the base, and the brushing in the corners. The effects on this base shape will take the longest. I used almost 25 layers to create the details here. It requires lots of trial and error to get the corners to look smooth.
While the same effect can be achieved with the Blending Options alone, I prefer to use no Styles at all so that I have complete control over the pixels. There is never any step-by-step process I follow for these types of details. I just continue to add until I am satisfied with what I see. Go into pixel-pusher mode!
Step 7
Next add an Inner Glow Layer Style to the blue base. Create a duplicate of the blue screen’s Layer. Right-click on the Duplicated Layer and choose Clear Layer Style to get rid of the Inner Glow Blending Option. Go to Filter > Blur > Gaussian Blur. Type in 10 and press OK. This will create a blue glow effect outside of the screen. Make sure to move this blurred layer underneath the original, just to help keep everything clean later for on. Repeat this step several times with different Blur sizes and Blending Modes. Aim for a nice, strong, ambient glow.
Use the Eraser Tool (E) to go back and remove any parts that are too strong. Make sure you remove most of the blue glow from the right side, since the light source’s shine would weaken the blue glowing effect in that area.
Step 8
Next we will add an Inner Glow Layer Style to the blue base. Create a duplicate of the blue screen’s Layer. Right-click on the Duplicated Layer and choose “Clear Layer Style” to get rid of the Inner Glow Blending Option. Go to Filter > Blur > Gaussian Blur. Type in 10 and press OK. This will create a blue glow effect outside of the screen. Make sure to move this blurred layer underneath the original, just to help keep everything clean later for on.
Step 9
The safest way to add depth in a screen is to add a subtle dark gradient from the bottom up. Using the Gradient Tool (G), match my result as closely as possible. Note that I used a Linear Gradient that was perfectly vertical (because I held the shift key), not a Radial Gradient like before. Experiment with the Soft Light and Overlay Blending Modes. I also went back and made the Inner Glow for the main blue layer 200x stronger. Often times I go back and adjust Layer Style settings. In fact, most of the cleaning/revising process is made up of really small adjustments to the settings.
Step 10
The screen should still look flat. In the past, I would leave it here and try to make up for it with other details. Luckily, the interface community has enough members who care. I came across a new approach that has proven to be both effective and fruitful. Lance Thackeray, who I mentioned in Part 1, made several orbs and screens with this basic look. First, Fill a Circle on a New Layer in the middle of the screen that is about this size. You can fill it with any color, because you will be setting the Layer’s Fill to 0% anyways.
Step 11
Set the Layer’s Fill to 0%. Open of the Layer Styles and add an Inner Glow with the following settings.
Step 12
Duplicate the Layer and Transform the Layer horizontally (Command + T) to about 85% of the original width. Next, open up the Inner Glow options and fill in the following data.
Step 13
Next we need to create an inner ring. This adds to the illusion of depth because it adds a deep end of the screen that is slightly darker. First, we must create a strong, exaggerated ring. You can use the Brush Tool or the Elliptical Marquee Tool for this. First, create a basic shape, and then use the Blur Filter again to blur out the edges. Once you have a ring matching mine, lower the Opacity to about 10%. You want it to hardly even be there. That is when it is most effective. I also made the screen a little bit darker to bring out the richness of the colors and gradients.
Step 14
Now comes one of my favorite parts – the highlights. Using the method I taught for the side highlights on Step 46, create a strong highlight at the top of the blue screen. Also, add a 3-4 pixel reflection at the top by repeating the infamous Step 37 again. Make the top-most edge even stronger. Little gradients within these 4 vertical pixels can be very effective. I used 8 Layers to get my results.
Step 15
I like to add some tecky brushes to my interfaces. It really bring the look up to date. Zane Bien, aka z-design has compiled a massive collection of advanced tech brushes. Z-Design Tech Brush Sets: 1 | 2 | 3 | 4. Have a look through those and pick something that you like. I chose one from the second set and placed my personal logo inside the blank area in the middle for a stunning result.
Step 16
It would be fair to stop here since it is essentially completed. Now, I would like to take this the extra mile and enhance the core interface we have created up until now. Everything you have worked on should all be well organized within a Folder called “Interface.” I want you to Duplicate this Folder, and flatten (Command + E) the Duplicate.
NOTE: You should never, under any circumstances, ever delete or flatten your original folder.
To this day, I see people posting complaints like, “Oops, I lost that part of the design,” or “That part was flattened, I wish I could go back and change it.” Save yourself from this nightmare and save the original folder. Go one step further and create a duplicate source file before moving on to the next part. I duplicate my source files after every 2 hours or so of work. I add “_01″, “_02″, etc to my filenames so that I lessen my chances of loosing the most recent updates. I lost important source files on two of my largest projects ever. One because of a black out that corrupted my open source files, and another from a complete hard drive failure. Don’t risk it. Back your files up now. I mean it.
Rename your newly duplicated and flattened layer to “flat.” Place it into a New Folder called “Interface_80%.” Press Command + T to Transform it to 80% both vertically and horizontally. Press Enter when done.
Step 17
Duplicate this shrunken down layer, and go to Filter > Sharpen > Sharpen. This will make the interface much more crisp.
Step 18
Grab the Eraser Tool (E) and clean up any parts of the interface that are too crisp and that even appear pixelated. Use custom Eraser settings to clean up the parts you want to clean up. Take your time on this step, it could easily take up to 15 minutes of zooming in and erasing at a close up view.
Step 19
Flatten your sharpened and unsharpened layers into one. Add a Drop Shadow and an Inner Glow with the following settings.
Step 20
Use the Dodge and Burn Tools (O) to add brightness and darkness to parts of your interface that you feel need some touching up. Again, like with Step 18 [Part 2], take your time on this. I took about 15 minutes to work on this.
Step 21
Now lets give the screen some more attention. Load the inner screen’s base and in the menu, go to Select > Transform Selection. Type in 80% for both the height and the width, and save this new selection as “Inner_Screen_base_80%” so that you can grab it again later if needed. Create a New Layer and fill the “Inner_Screen_base_80%” selection with black. Set the Layer’s Fill to 0%, and add a 15 pixel black Inner Glow. Duplicate this layer, and change the new layer’s Inner Glow to Overlay. Experiment with different settings to achieve a clean result. Recreate the highlight if you have to by loading the selection and creating it manually. That highlight’s corners should stay crisp and visible.
Step 22
Using these lines that I have provided for your, fill in a grid over the screen that makes it look more technical and computerized. This is seen on calculators and other handheld devices, so I thought it would be a nice little touch. I used the Eraser Tool (E) to clean out the center of the grid where the logo was, and I also lower the Opacity of the Layer to about 10%. Use multiple Layers with multiple Blending Modes if necessary.
Step 23
Our interface is starting to develop character. We need more details. Add some micro bolts and nuts to the various surface shells. You can download a basic, transparent bolt here. Open the file in Photoshop, copy the contents of it, and paste it into your other document. Set the bolt layers to Overlay and/or Soft Light and alter the layer Opacities depending on what type of background they are sitting on. Starting with just the left side, duplicate and place bolts throughout the interface. Once you are happy with the left side, duplicate and flip them all for the right side. Also, throw a nice title or name on there with an appropriate font.
Step 24
Flatten everything up until this point in a duplicated Folder. Hide the original folder, and continue to work with this new one. Command-click on the flattened Layer’s icon to show its selection. At the bottom of the Layers Panel you will find a button labeled as “Create new fill or adjustment layer.” Click and hold this until a new list of options comes up. Move your mouse to “Vibrance” and release your click. A new dialog box will appear. Set the Vibrance to about 15 and the Saturation to 10 before closing the box. Your blue should appear even richer now.
Step 25
Once again, go through your interface with the Dodge and Burn Tools (O) on customized settings until you are happy with the contrast of your finished interface design.
I hope you found this tutorial to be useful. It was not an easy set of concepts to teach, and I hope that it gives you enough to at least be inspired to learn more about high tech, realistic interface design. There really aren’t too many of us out there, even though our genre is definitely expanding exponentially.
Additionally, I would like to clarify my opinion about the difference between art and design. Art is communication in any form, and it is without boundaries. Design has restrictions, and it is about how users interact and experience something.
An interface player with buttons that works as an actual skin is a design. However, if an interface doesn’t have buttons or interactive agents, and it only exists as a static image with no interactivity, it is a psuedo-design. When that line becomes blurred, it is really more likely to be art.
I am happy with the term “fantasy interface designs” because it is ambiguous enough to cover everything with one name. I have been trying to understand the differences between design and art for several years, and my current philosophy is very strong in my mind. If you have any thoughts, critiques or opinions about my tutorials, techniques, and ideas feel free the share them below with a comment.
