Total Followers 132,503
Hello and welcome to another Adobe Photoshop tutorial, today we are going to create a HD Television. I don’t think this tutorial and creation will be too difficult for you because I’ve put everything in easy to follow steps and tried to explain the best I could.If you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this tutorial! Let’s get our hands dirty!
Let’s start by creating the background.
Create a new document ( CTRL+N) and make it 500 by 500 px.
Create a new layer(CTRL+SHIFT+N), fill it with random color and then add a Gradient Overlay like in the screenshot below:
Gradient overlay:
Create a new layer.
Select the rectangle tool and make a shape with it to be something similar like screenshot below (the color doesn’t matter now).
Press ”Ctrl + T” or go to Edit>>Free Transform Path to select the transform mode.
A button will appear to switch the transform mode to wrap mode.
Click on it:
Now your selection should have been changed a little bit:
Click hold and drag point 1 to the 2, try to follow screenshots very closely now:
Do the same with the other point:
Once you have done, Hit the Enter button and you should have got something similar to Television screen shape:
Great! Now let’s add these Blending Options:
Done? You should get something like this now:
Create a new layer.
Select your Rectangle Tool (U) again, set it to 2px and create another rectangle like below:
..and add following Blending Options now:
Create a new layer.
Create a new rectangle but just a little bit bigger than the first one. Make sure it is set to 2px.
..and set it below the first and the second layer. So it should appear like this to get some more 3D in depth look:
Do the same settings as we’ve been done in previous Step 2 :
After modifying hit Enter or click OK to approve it:
Now add Blending Options (for the first picture you only need to set the Fill Opacity to 0%):
Your outcome should look like this now:
Okay, now we need stem where monitor will sit on. Let’s do it!
Create a new layer and create something like the selection below using your tool preferred. I used the Polygonal Lasso Tool (L) here:
Fill it and add following Blending Options:
Let’s create a new layer again and make a selection like screenshot below:
(you can do it by ctrl+click on previous layer and then with lasso tool select selection from previous layer selection)
And add these Blending options now:
>
Your result should look like mine:
Merge 2 stem layers together now.
Okay, let’s create stand now!
Create a new layer and draw a rectangle like screenshot below:
Go to Edit, Transform Path>>Perspective.
Now select the square above the left corner and drag it a little bit to right to create something like screenshot below. When you are finished set it to lie below the stem layer.
When you are done add following Blending Options:
Duplicate the Stem layer, then go to Edit>Transform>Flip vertical and set it below the original stem.
Now create a new layer and brush with a white color on the stand.
Now erase the parts you don’t need anymore (like the picture below) and bring the Opacity down until it looks realistic:
Create a new layer and create a selection like this with your Polygonal Lasso Tool (L):
Fill it with white color (or use subtle gradient if you prefer it that way):
Now just bring the opacity down a little bit as you like to get realistic effect.
Create a new layer and brush with a black color on the left side like I did to give it more 3D look.
I will not go in detail in those small steps,but small tips to finish:
You should have your own LCD TV now! Great!
Is it not easy? Add now some cool looking image, portfolio work and put it on your webdesign, be creative!
You can download the Photoshop files here.
Get The Only Freelancer crash course you will ever need to read!
Monday, September 12th, 2011 15:54
Very beautiful…..Thank you for share idea.
Sunday, May 2nd, 2010 06:27
Very good tutorial. Thank you for sharing.
Monday, April 12th, 2010 16:10
This is an awesome tutorial, thanks ES! are you able to contact me via email with some potential work opportunity?
Friday, April 9th, 2010 19:22
Nice TV-set, but there is fault with reflection’s perspective
Friday, April 9th, 2010 06:21
Very nice tutorial, love your use of the warp tool.
Wednesday, April 7th, 2010 18:15
I didn’t get much out of the television tutorial, as I am not a user of photoshop, but the end result is fantastically realistic!
I loved the interviews! I found so much stuff to dig into, and download.. I have been browsing in and out of this post for 3 hours and have not gotten past the fourth successful and very much to be watched businessman for “how to get wealthy on the internet” advice!
I found the greatest down loadable patterns for Paper craft if you are a Trekkie and I know just the young man who will love them.. thank you once again a wonderfully fun and educational posting!
Terri Lockerridge
Wednesday, April 7th, 2010 06:08
I have been watching too much TV nowadays ;) Good tutorial, btw. Thanks a lot, guys
Wednesday, April 7th, 2010 10:10
Pretty nice tutorial, this Samsung HDTV design is really beautiful. :)
Wednesday, April 7th, 2010 09:11
Very nice. It’s a very good idea to use warp instead manual drawing, the result will be more accurate. Just a small suggestion.
1. I will add small underneath the TV’s base.
2. The transparent frame is much too transparent. I don’t know if a real TV this transparent.
Wednesday, April 7th, 2010 08:45
I tend to assume, well my brain does, that this kind of illustration has to be done in illustrator rather than photoshop….thanks for the reminder that Photoshop can do this kind of work as well, great article.
Wednesday, April 7th, 2010 08:35
Very Good Explanation on designing a television, but could not find the steps for converting into icon…
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Teylor Feliz
Tuesday, April 6th, 2010 23:23
Very good tutorial. Thanks for sharing!
Min Thu
Wednesday, April 7th, 2010 10:10
Pretty nice tutorial, this Samsung HDTV design is really beautiful. :)
Richie
Wednesday, April 7th, 2010 06:08
I have been watching too much TV nowadays ;) Good tutorial, btw. Thanks a lot, guys
jeprie
Wednesday, April 7th, 2010 09:11
Very nice. It’s a very good idea to use warp instead manual drawing, the result will be more accurate. Just a small suggestion.
1. I will add small underneath the TV’s base.
2. The transparent frame is much too transparent. I don’t know if a real TV this transparent.
obozdag
Wednesday, April 7th, 2010 09:03
Very nice tutorial. Thanks.
Web Risorsa
Wednesday, April 7th, 2010 08:35
Very Good Explanation on designing a television, but could not find the steps for converting into icon…
Tom Girling
Wednesday, April 7th, 2010 08:45
I tend to assume, well my brain does, that this kind of illustration has to be done in illustrator rather than photoshop….thanks for the reminder that Photoshop can do this kind of work as well, great article.
mintocity
Wednesday, April 7th, 2010 06:51
Very good tutorial, thanks
Terri Lockerridge
Wednesday, April 7th, 2010 18:15
I didn’t get much out of the television tutorial, as I am not a user of photoshop, but the end result is fantastically realistic!
I loved the interviews! I found so much stuff to dig into, and download.. I have been browsing in and out of this post for 3 hours and have not gotten past the fourth successful and very much to be watched businessman for “how to get wealthy on the internet” advice!
I found the greatest down loadable patterns for Paper craft if you are a Trekkie and I know just the young man who will love them.. thank you once again a wonderfully fun and educational posting!
Terri Lockerridge
hxhx2hx
Wednesday, May 18th, 2011 10:33
Very good tutorial. Thank you for sharing.
umami
Monday, September 12th, 2011 15:54
Very beautiful…..Thank you for share idea.
17ps8
Sunday, May 2nd, 2010 06:27
Very good tutorial. Thank you for sharing.
Rob
Monday, April 12th, 2010 16:10
This is an awesome tutorial, thanks ES! are you able to contact me via email with some potential work opportunity?
loswl
Friday, April 9th, 2010 06:21
Very nice tutorial, love your use of the warp tool.
Artem
Friday, April 9th, 2010 19:22
Nice TV-set, but there is fault with reflection’s perspective
Alex
Sunday, April 11th, 2010 02:41
great tutorial! thank you!