alandesigns

Here is a look at what we will be making:

This tutorial is going to walk you through the process of making a nice flat-screen HDTV. This could be great for showing off images or videos, or just honing your Illustrator skills. We will cover a variety of tools including the Gradient Palette and the Pathfinder Palette. Lets get started!

I am using a Mac, and in this tutorial I will add shortcut commands, such as (cmd-F) for Paste in Front. PC users just substitute (ctrl) for (cmd) in most cases.

Step 1: Getting started

Start out by creating a new document 580 x 560 pixels in RGB color mode.

We’re making a fancy HDTV with a see-through part on the bottom so use the Rectangle Tool(M) to create a rectangle the same size as the artboard. Fill it with a blue #008AD1. That way we can see the glass / plastic better.

Lock it (cmd-2).

Step 2: Create the HDTV frame gradient

Before we create the frame let’s set up the gradient that we will use on it. Make 3 colors, #B8BCB7, #414441, and #141614, dragging each one to swatches library. It’s basically light, medium, and dark grey but with a bit of color to keep it natural.

Using the Gradient Palette (Window / Gradient if you don’t see it) drag each color onto the gradient bar, light at 0% position on the left, medium at 50% in the middle, and dark 100% on the right.

Select radial for the gradient type

Once you’ve got that drag the gradient swatch into the swatches palette.

Step 3: Create the frame

Make a rectangle with the Rectangle Tool(M) to the size of your HDTV frame. I made mine 332px X 206px.

With your frame selected choose the gradient, and using the Gradient Tool(G) drag from top left to middle like shown below:

Step 4: Create the screen

Create a new black rectangle for the screen. I made mine 300px X 164px. Position centered with a bit more room on bottom like shown below:

Copy the screen (cmd-C) and paste behind (cmd-B) a new rectangle for the edge and fill with your medium grey #414441. This will be the inset look of the screen.

Click and drag outward while holding alt + shift to expand the rectangle just a bit.

The rectangle will be a little too wide so drag either side inward while holding alt so you have even edges.

Step 5: Create the glass shape

Copy the frame (cmd-C) and paste behind (cmd-B) a new rectangle for the glass edge. Fill it with white for now

Click and drag outward while holding alt + shift to expand the glass edge like the screen edge in the last step. Also adjust the sides inward while holding alt like in the last step

Extend the bottom of the rectangle down a bit.

With the white rectangle selected, go Object / Path / Add Anchor Points. With the Direct Selection Tool(A) select the middle point on bottom and nudge it down 6 taps.

Step 5: Create the glass gradient

Make a new color #8D938C and drag it into the Swatches Palette to save it.

In the Gradient Palette make a new linear gradient with #8D938C on each end and white in the middle, and at position 15%, and at 85% like shown below:

Drag the gradient into the Swatches Palette to save it.

Step 6: Finish the glass edge

Give it a stroke 1pt #075D89

In the Appearance Palette select just the fill and reduce to 40% opacity in the Transparency Palette.

Step 7: Create the stand

Make a new rectangle about the width and height of the “stand” you want. Mine started at about 24px X 41px

Make a linear gradient from colors black and your medium grey #414441. Black goes on each end and in the middle, #414441 at 25% and 75% like shown below:

With the stand selected go Object / Path / Add Anchor Points. Select the bottom middle point and nudge it down about 4 taps.

Using the Convert Anchor Point Tool(shift-C), nested in the Pen Tool, click the bottom middle point and hold shift while dragging to the left until you have a nice curve.

Position the stand about where you’d like it. Select all the screen parts besides the stand and group them (cmd-G). Select the screen group and the stand and select Horizontal Align Center using the Align Palette.

Send the stand behind the screen with right click / Arrange / Send Backward — or (cmd-left bracket).

Step 8: Create the base

Use the Rectange Tool to make a rectangle the size of base you want. I made mine 155px X 15px

Using the Direct Selection Tool(A) select each bottom corner point and nudge them outward 7 taps. Make it like an isosceles trapezoid (yes I had to look that up…)

Step 9: Create the base gradient

We are definitely getting practice making gradients! Let’s make another one for the base similar to the frame gradient from step 2 following these steps:

1. Make a new color #666B65 and drag it to the Swatches Palette
2. Click your first radial gradient we made for the frame and bring up the Gradient Palette
3. Replace the middle color with the new #666B65 by dragging it from the Swatches Palette onto the middle handle in the Gradient Palette.
4. Drag your new gradient to the Swatches Palette
5. Apply the gradient to the base shape if it was not already selected

Position the base behind the stand > right click / Arrange / Send Backward — or (cmd-left bracket) and center it using the Align Palette. To center it you will need to group everything except for the base (cmd-G), then select both base and the TV group.

Step 10: Create the base edge

Copy (cmd-C) / Paste in Front (cmd-F) the base and fill with #141614.

Right click / Transform / Reflect and choose horizontal with angle 0 and click ok to make the edge.

Click and drag down while holding shift to align the top of the edge with the bottom of the base like shown:

Zoom in far enough so you can get it perfect.

Drag a rectangle above the edge to where you want to chop off the excess.

Select both objects and in the Pathfinder Palette choose Subtract from Shape Area (or also called Minus Front) to chop off the excess. Click Expand if the option is available (earlier versions of Illustrator).

Step 11: Create the little connection lip between the stand and base

Use the Ellipse Tool(L) (nested in the Rectangle Tool) to draw an oval like the one pictured, and fill with #414441.

Position the oval behind the stand (cmd-left bracket)

Step 12: Give the TV some flair

Let’s make a strip of color just under the TV frame. Start out by following these steps:

1. Select the monitor and ungroup everything (cmd-shift-G).
2. Select just the glass part. Ungroup again if needed to do so.
3. Remove the stroke.
4. Fill it with an orange #FF9900 (or your favorite color!)

With the Selection Tool(V) click and drag the top right corner inward, while holding alt + shift to shrink the orange shape a bit.

Nudge the orange shape up until the corners are hidden.

Adjust the top of the orange shape down because it’s sticking out the top, using the Selection Tool(V). Or chop it off using Subtract from Shape Area in the Pathfinder Palette..

That’s looking like a nice HDTV right there, but we have one more step to polish it off.

Step 12: Create the shine

Shine, glare, highlight, sheen…whatever you wanna call it we’re gonna make it! Start out following these steps:

1. Once again Copy and Paste in Front(cmd-F) the glass object.
2. Select just the glass part. Ungroup again if needed to do so.
3. Bring it all the way to front (cmd-shift-right bracket).
4. Remove the stroke.
5. Make the fill white.
6. It will have 40% opacity left over from the glass shape you copied, and that’s ok for now, we’ll adjust that in a bit.

Using the Pen Tool(P), draw a new shape like shown, with a slight angle on the left side.

Select both shapes and using the Pathfinder Palette select Subtract from Shape Area.

Now you may use the Transparency Palette to reduce the transparency to your liking (about 10%). Wondering why it says 100% opacity in the Transparency Palette? That’s because the whole object is selected and not just the fill color from the Appearance Palette. For the glass earlier we reduced the fill color but not the stroke in this way.

Your brand-new flat screen HDTV is done!

Now you can throw on a logo, add a screen image, and customize the TV how you like

Thanks for following my tutorial! I hope you learned lots from this.

The effects and techniques demonstrated in this tutorial can be used however you like, I’d sure appreciate a link back though! The text and images in this tutorial itself are copyright of www.alandesigns.com and may not be distributed.