All posts tagged: photoshop
livery painting tutorial
Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

One of the most common questions I get about my free JPG sideview airliner templates is how to add realistic color and highlights to them. There are many of you who are struggling with this, so I thought it would be good to explain just how easy it is using Photoshop. And as a matter of fact, you can use any graphics editing software you want. Any decent graphics or illustration program will do, but for the sake of this tutorial I’ll show you how to edit the JPEG files directly in Photoshop.

So go ahead and download one of my free templates – any one of them will do, fire up Photoshop, and let’s get started! In addition to writing this all out in an easy to follow step-by-step guide (below), I also created a video for those who prefer to learn that way:

Step one: tracing the entire aircraft

The easiest way to add color to these templates is to simply cover the entire thing, and then erase what you don’t need. For the sake of this demo, I’m just going to use red. It’s a bright color, and it will be easy to show how this is done.

In order to trace the entire aircraft, I just use the magic wand tool and click anywhere outside of the aircraft. What this does is selects the entire white area of the background – which is backwards from what we really want, but that’s okay.

use magic wand tool to select background

Use the magic wand tool and click anywhere in the white space on the background.

Just go to the top menu and click Select > Inverse and now the active selection area has been switched to the edges of the aircraft instead of the background.

select inverse tool photoshop menu

Choose Select > Inverse to change the selection from the background to the aircraft.

Create a new layer. This is the layer that we will be adding our color to.

create a new layer

Create a new layer in the layers window.

change fill color

Change your primary fill color to red (or whatever color you want your aircraft to be).

To fill the selected area with color, just hold down Option + Backspace (or Ctrl + Backspace if you’re on a PC) on your keyboard and it fills in the selection area with your primary color. You’ll notice when you do that that the vertical stabilizer and other small details may not get filled in, simply because their color matches the white color of the background too closely and it was never selected in the first place. That’s okay. Just use the lasso tool to trace the outline of the vertical stabilizer (or any other part that was missed) and press Option + Delete on your keyboard to fill those empty spaces.

fill command applied

After applying the Fill command, you may get something that looks like this. Don’t worry – we can fix that.

use lasso tool to select vertical stabilizer

Use the Lasso tool to trace around any areas that were missed in the original selection.

photoshop fill command

Once you’ve selected the missing pieces, go ahead and use the Fill command to fill it with your primary color.

Step two: adding transparency

Okay, now that you got your entire aircraft covered with red, you can easily see that it doesn’t look very good. There’s no detail! Don’t worry, this is an easy fix.

entire aircraft filled with color

Everything is now filled with color, but it still doesn’t look very good.

With your color layer selected, simply go to the blending modes drop down at the top of the layers palette and choose “ Multiply”. Voila! You can now see all the shadows and details of the template underneath, while maintaining the fully vibrancy of the red fill color.

photoshop multiply blending mode

Choose “Multiply” from the dropdown menu at the top of the layers window.

Step three: trimming your color layer

We obviously don’t want paint over top of the wings and other details, so it will be necessary to trim all those areas away. With your color layer selected, use the lasso tool to trace around any areas where you do not want color. I usually hold down the Option key on my keyboard and then click around the object to trace – this constrains the lasso to straight lines which makes it a lot easier to trace complex objects.

use the lasso tool to trim

Now its time to go back and start trimming out all the areas you don’t want color. Use the Lasso tool for this.

Step four: adding highlights

Starting to look pretty good isn’t it? There are some more things we need to do in order for it to start looking realistic though. The biggest issue is the lack of highlights. The fuselage of an aircraft is essentially a large cylinder, and it’s not going to look realistic until you put a highlight right down the center of it. In order to do that, select the soft paint brush tool with a radius of 65 and change your primary fill color to white.

Create a new layer and simply draw a horizontal line with that soft brush across the entire length of the fuselage. Holding down the Shift key will constrain the line to be perfectly straight which really helps in situations like this. Don’t worry about coloring outside the lines – just put a nice highlight across the length of the fuselage, and we will trim away everything that spills over the edges in a moment.

painting highlight with photoshop

Change your primary fill color to white and choose a soft brush with a radius of 65. Create a new layer, and paint a horizontal line with that brush across the length of the fuselage.

If it’s too sharp you can use the Gaussian Blur (Filter > Blur > Gaussian Blur) tool to blur it out to your liking.

Once you got looking the way you like, we need to trim away all the white highlight that is spilling beyond the edges of the fuselage. Go back to your color layer, hover over the thumbnail icon of the layer and click it while holding down Command on your keyboard. This will select the entire color layer. Then go to Select > Inverse.

With the color layer still showing the marching ants around it, select the highlight layer and then press delete on your keyboard. This will delete all of the blurred white highlight that was extending outside the edges of the aircraft.

trimming away highlight

Don’t forget to trim away all the white highlight color that extends beyond the edges of the fuselage!

Step five: enhancing the details

Its starting to look like a real aircraft isn’t it? The only problem now is that we can’t see the windows anymore. While you could go through your layers and just delete everything that is covering each window, I would advise against that simply because you want to leave color and highlight layers intact as much as possible. Do not cut those up, because you never know when you need to go back and edit them in the future.

The easiest way to bring back the windows is to simply re-create them. It takes a few minutes but it’s totally worth it. You can do this by creating a new layer and then use the ellipse selection tool to trace an existing window. Fill that with black, and then duplicate that layer for each window using the position of the windows in my template as a guide. What you got all the windows re-created, it’s best just to combine all those window layers into one to keep things simple and organized.

tracing a window

With your bottom (aircraft) layer selected, recreate one window by tracing it with the ellipse selection tool, and then use a copy and paste command – this will automatically create a new layer with just this window in it.

duplicating windows

Keep duplicating that new window layer until you have all the windows recreated. Then, combine all those layers into one and move them back into position. Make sure this new layer is above your color layer, or you’ll never see it!

new windows created

Once you recreate your windows and place that layer over your color layer, this is what it should look like.

Step six: Bling!

One of my favorite parts about creating aircraft illustrations is adding the hard reflection on the vertical stabilizer. It’s the little details like this which will really make your illustration pop and give it tons of depth.

To create a hard reflection, simply trace the edges of the vertical stabilizer with the lasso tool.

tracing with lasso tool

Trace the vertical stabilizer with the lasso tool.

Create a new layer, and use the gradient tool to add a white gradient to the front edge of the vertical stabilizer.
As you can see, our first pass of this is much to bright. Since it’s on its own layer, increase the transparency of the layer so that it’s not so strong.

photoshop foreground to transparent linear gradient

Select the linear gradient tool (foreground to transparent) with white as your primary color.

applying linear gradient photoshop

It’s a bit difficult to see in this screenshot, but notice how I am drawing a diagonal line with the linear gradient tool from the front edge of the vertical stabilizer to the center.

Then use the lasso tool draw a hard line down the center of the vertical stabilizer. Delete the left edge.

trimming using lasso tool

Trim away that gradient with the lasso tool. Select the area you don’t want, then press Delete on your keyboard.

vertical stabilizer reflection

This is what it looks like after trimming the reflection. Notice that I reduced the opacity of the reflection in the layers window – you don’t want it too strong!

aircraft painting almost complete

It’s starting too look much more realistic now, but one thing that I don’t like about this is the hard reflection of the vertical stabilizer compared to the soft reflection on the fuselage. Let’s do something about that…

airliner template painting complete

Selecting the layer for the soft highlight on the fuselage and then cutting it in half with the rectangular selection tool gives it the appearance of being a hard reflection – which matches the hard reflection of the vertical stabilizer. Much better!

So there you have it. Adding color to my free JPEG templates isn’t really that difficult, and you’ll get a lot better with practice. Of course my high resolution PSD templates are much easier to work with (because each element is on a separate layer), but working with these JPEG’s will seem like second nature once you get the hang of it.

Still have questions? Leave a comment below or feel free to email me if there’s something that you’re still getting stuck with. I’d love to help!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Silver and gray smartphone template screenshot

Silver and gray smartphone cover page template for PowerPoint or Keynote

I don’t know what it is, but somehow I always gravitate to metal textures in all my design work. It’s funny how it works that way, and I swear that I’m not doing it on purpose! But I’ve come to accept that this is my style and I really enjoy experimenting with it and trying to integrate those kinds of textures into whatever it is that I’m doing. With that said, I present to you another presentation cover template with mobile devices over a metallic silver and gray background. It’s actually a variant of this one that I uploaded a few days ago, and it’s interesting to see how that even though the mobile devices are the same, the mood is completely different with just a background swap.

The good thing about this cover page template is that the screen on the forward facing smartphone is blank – so inserting your own screenshots or any other kind of graphic should be really easy. Plus, it will make this template uniquely yours! Just add your elements in Photoshop, save to JPG, and import into PowerPoint or Keynote.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Transparent tubes presentation cover page template

Click to download this fully editable PSD presentation cover slide

Every now and then I go on a huge binge creating abstract background elements and textures to use in my projects, and the transparent tubes that are the main feature of this presentation cover page template are the result of my latest one. I’ve spent about 20 hours this week creating these abstract backgrounds, and I believe it to be well worth my time considering how much mileage I’m going to get from these renderings over the coming months.

This cover page template is definitely one of my favorites so far. The top section is visually rich with loads of transparency and gloss, while the lower portion was intentionally left plain and simple to allow space for a corporate logo or other information. And actually, even though I put the presentation title in the upper section, it would work just as well to leave that area blank and put all the text in the gray section below. I mocked up a version of that and it didn’t look so bad.

All of the text on this presentation cover page template is fully editable, and you can extract the background and import it into PowerPoint or Keynote . Of course you can use it as it is without changes, but I’d encourage you to change it to your heart’s content to make it something that is truly unique and specific to your needs. I always get a kick seeing how people use my work, no matter how extensive the modifications are!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Smartphone presentation cover screenshot

A fully editable presentation cover template in Photoshop format

I recently finished a huge batch of white and black smartphone illustrations, and now I’m starting to find all kinds of uses for them. Case in point: presentation templates! I recently created this cover page template  for some colleagues who were giving a talk on mobile devices and UX design, and it features three large white touch screen mobile phones arranged in a nice composition on a green and gray background. The screen is completely blank on the phone that is facing forward, so you’ll be able to put anything on there that you want (like corporate logos, screenshots, app names, etc). The rest of this slide template is spacious and open as well, so you shouldn’t have any problems fitting in the name of your presentation titles and other information.

I’ve got a lot of different versions of this template in my archives that feature phones of a different color, tablets, and different background colors and textures. I’m still using a bunch of those for some other project related things, but I’ll upload them here once I no longer have a need for them.

By the way, this cover page template is in Photoshop (PSD) format. The text is fully editable and you can change it and move it around however you want. Enjoy!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Presentation cover screenshot

Blue and gray presentation cover template. Click on the image to download it.

I recently created a TON of concepts for a UX-themed PowerPoint template, and there are a lot of leftover designs that I have no idea what to do with. One reason why I have so many is that my client was looking for several templates to use on a rotating basis – which seems to be a smart idea for anyone who gives presentations frequently. It keeps your content looking fresh and your audience interested (especially if it’s the same audience over and over again). The other reason is that I really enjoy creating presentation templates. Variations of these things are very easy for me to produce, and I find myself tweaking forever and telling myself to stop and move on…

This blue and gray cover page template is in a fully editable layered format (PSD), so you’ll be able to move things around and adjust the design however you wish before you import everything into PowerPoint or any other presentation software such as Keynote. It’s very simple, and the premise of the design is that the X from “UX” becomes sort of an abstract graphic element and part of the visual structure of the slide. The good thing is that it’s abstract enough that you can even use this template even if you don’t need to have a User Experience theme.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Website template preview

Fully editable gallery website template in Photoshop (PSD) format

When it comes to visual design, I often try a lot of different things before settling on one clear direction. This photo gallery website template is one such example. I created it back in 2009 just as I was starting to plan the Norebbo online presence, and as you can see, I was actually thinking about building my own custom image gallery site. I was pretty excited about doing everything myself and created three page templates in Photoshop before I realized how much of a nightmare it was going to be without a CMS (content management system) behind it to manage everything. I’m not code guy at all, so while I wouldn’t have any problems building the structure in HTML and CSS, I would have a ton of issues managing it over the long term. That’s when I discovered the power of WordPress, and the rest is history.

This website template includes a homepage, gallery page, and text page. It was designed to showcase a large collection of images in a very clean and simple way, making them the primary focus of the design. It’s built around a simple grid system, with rectangular modules that can be inserted and removed however you want to do it. There’s even blank modules for advertising images and banners.

Now that I have no need for it, I thought I’d offer it here to anyone who would like to use it. And sorry, HTML and CSS is not included. That’s probably just as well because I’d imagine you’d want to do a lot of personal customization to it anyway.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Yeah, I’ve been pretty busy lately. I mean…REALLY busy. It’s the sort of busy that makes me feel guilty for spending too long in the bathroom, and there just aren’t enough hours in the day to do everything I need to do. But I do see some relief in sight, so that’s the only thing keeping me hanging on. A Hawaiian vacation would be epic right about now…

So what has been keeping me so busy over the last month or so? Mobile UI design, and a whole lot of it. I had a client who was looking to re-skin their existing Android app into something more “clean and white, with glowing blue elements”. I ended up generating about 10 initial design concepts for them to choose from, so we had a lot of good options before really digging into the nuts and bolts of the re-skin. The end result turned out rather nice, and I’ll try to show the final designs here once it’s officially released.

Because of the large amount of initial concepts I generated, I’m now sitting on a handful of perfectly good mobile phone UI templates that don’t have a home. I’m keeping the best ones for myself to use on future projects (sorry!), but I thought I’d throw up a couple of them here on norebbo.com for anyone who’s interested.

So…here are two fully editable mobile phone UI templates in Photoshop (PSD) format, and they are free for the taking. I guess the best way to describe them is “white and clean” – they are totally generic, but do feature some blue highlights here and there. Please use them however you wish. Both are high resolution 480×800 layouts which works perfectly for Android devices. Converting these to landscape formats shouldn’t be too difficult if you’re handy with Photoshop.

Enjoy!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Direct selection of layers

To some, this may seem like a total “duh” tip – but you wouldn’t believe the number of people I run into that don’t know that you can directly select layers in Photoshop (from your canvas) without having to wade through the layers window. I am somewhat ashamed that even I didn’t know this until a few years ago. Immediately upon discovery, I couldn’t help but to think of all the wasted hours I had spent scrolling trough the layers dialog in search of elusive layers that I was too lazy to name.
So what’s the trick to selecting layers directly from the canvas? It’s actually very simple, and I can explain it in a few simple steps:

  1. On your canvas, hover over the element you want to select the layer for.
  2. If you’re on a Mac without left and right mouse buttons, hold down the “control” key and click the mouse. Or, if you are using a mouse with left and right buttons, right click on it (works on both Mac and PC).
  3. A dialog should appear, showing you a list of all your layers located at that spot where you clicked, with the layer of the element you selected already chosen for you.
  4. Click on it, and…voila! You have just selected that layer without even having to navigate inside your layers window.

This is a total lifesaver for those times when you receive a complex PSD file from someone else who hasn’t taken the time to organize and name their layers. As a matter of fact, that’s actually what led me to discover this little trick. I was up late one night fighting my way through an edit of a PSD that I had received from another designer, and in a fit of frustration, the smashing of the keyboard and simultaneous clicks of the mouse somehow magically aligned to reveal this handy little shortcut. I was like, “Whoa! How did I do that??” Then I spent the next 10 minutes trying to recreate those key and button smashing combinations before I finally gave up and summoned the power of google to find an explicit description of the shortcut. My life as a designer was forever changed from that moment on.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

A few months ago I built a 3d illustration of a generic tablet computer, and I used it as the basis for a large collection of royalty-free stock images. I often receive requests for a version of just the tablet by itself, so I thought it was time to do something about that. For all of you who have requested it, here you go!

I left the screen completely blank, so you can do whatever you want with that. And don’t worry – the reflection is on a separate layer so it won’t interfere with whatever you’d like to put on the screen.   Note: you will need Adobe Photoshop to view and edit this file.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Photoshop Blending Modes

I admit it – I’m a blending mode junkie. Most of the background images in my portfolio are the result of a LOT of blending mode combinations that are used together to create interesting effects. Before I begin to create a new background image, I don’t always have a clear idea in my mind of what I want it to look like – I usually just end up throwing several textures together in the layers palette and experimenting with blending mode adjustments until I get something that looks halfway decent.

If you aren’t aware of the power of these layer blending modes in Photoshop, you’re missing out on a whole world of creative possibilities. In a nutshell, this tool is found in the layers palette in the form of a drop down box at the top of the window. You need several layers in your palette before this drop down box becomes active, and you cannot apply these blending modes to the bottom (base) layer. Go ahead and pick any layer (as long as it’s not the bottom one), and try out a few blending mode options. Your image will update in real time, and depending on the blending mode that you choose, it can create some rather dramatic effects. Pretty neat, huh?

If you are like me and you incorporate these blending modes into your normal workflow, you’ll need a quick way to cycle through them quickly instead of picking them one by one (which takes far too long). Here’s how to do that:

On Windows:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The drop down box will stay highlighted, and you can now quickly toggle through the entire list with the up and down arrow keys on your keyboard.

On a Mac:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The arrow keys on your keyboard won’t toggle through these blending modes like they would on a Windows machine, so you’ll have to hold down the Shift key and use the “-” and “+” keys to cycle through all the modes.