Make LCD Monitor In Photoshop
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BJDrfleTG_vmQwAzQbGOMWR5s17B8elFJK0dnpSkavOrVHr_tJTEHwtSv2fA4se3WCWoLI986kcEl_e-jgLK_whMAza9rgDojyjseJdL_fEzO8J0Kx74DGtf0YP39PZit4o6lXPiKrX-/s1600/Make+LCD+Monitor+in+Photoshop.jpg)
In this tutorial I will show step by step how to make an LCD monitor in Photoshop. Very easy to do just by using layer style effects in Photoshop we get a cool LCD design. Let's get started!
Step 1
Open the Photoshop program create a new document sized 800px width 700px height. Select the menu View -> New Guide Position: 100px 700px 350px 450px.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq1i7rIHDcG7L38Yqk2a5sc45trM7Li22c62CsQKu2acSpmiHw5gL5ef3vWsLfXIlyblYOXcPv-mAFZGPB-Yz0T4yzGli_tTtNq6wW8BC92u5srTmVpTrK7b0V4lns7wNEfAcrNp1k8iCI/s1600/1.jpg)
Step 2
Change the Set Foreground Color gray color # 232323 activate the Rounded Rectangle Tool and set the radius value of 13px. Create a monitor box as shown below.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGM2yRmr1BtYb5kUoEpFMpGDzPmvtaZJ-rzSzjOG-oNKusTMbQsJajw7aZw6bkBPY-af1zPmHzeApv6Bxa1K2GcxbanU-LQNihC_IzfDljZoXueddJL7UgHEQjA5_mykSuLrDgfEHe795P/s1600/2.jpg)
Step 3
Add a layer style: Bevel and Emboss, Gradient Overlay. Set as shown below.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGU-7fVWDl-NhTnl8nNAD-DSplI-5KPAbVK-4d3vzroI_7Gr-q-wqnwp2hkFDTC1t_8LbCpOOPH-DW3nyxSAEuErpFbCsA5mbfYtIJnGumua7TY0wxLnSk0WdteShwd0maUFMI2bekz8PH/s1600/3a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUvweC4LWiNfnpt9CN6J-N_0ZoBi3vUftkYsmDFGuJiIBrCeMsxYYlRYB36PksQr0mVYZtpXfKnwtTKUamx1OwACz9b10l2YlaEtBS2Exrg1YvT8xQc7nIfgxD9Fbroqu0OvtqgSkmWojB/s1600/3b.jpg)
Step 4
Create a selection in the monitor box (Shape 1) then select the menu Select -> Modify -> Contract 24px
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmuyMDk3zwBebuLr5RDTe53_l0K8-ZuMHdf_g0wciQwHfbmHPHy5ymTBzqNaN_KykHcAX7bZqwAHo-UfVba2elNDyqy4bT7BRmv3vo7TCHrNsjAvjBaZYDVopuWKdZr3qzk_8W_XasjAU/s1600/4a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEC9fgUVfvts5a3buVBt0qUnSqY0O7j1PEGFICKsTAUVSz_4qRCjbKr0por64ALVfLveIVgYiea0HeT6cf8EnMl_b7fGXT8_SoGOOeM0BHSFVCQRnvHZZsO1ETg_9Rqzk_doJf7dsTinjm/s1600/4b.jpg)
Step 5
Create a new layer Set Foreground Color to change color in blue # 226ae0 and blue color fill layer 1 (alt + del).
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2aMPC-3mrkFsXdIun7GIwW69Rgret83rW11WwFZ76ttm8GLmg4UrGKvMfQmg_-2erjzBmHbU3ZzH8P9rfyuVphX736YqUc40X3rr_fmb5EnaV0ssZYwuPQ_tvZVx8p9s_AYGnx2fPkC4/s1600/5.jpg)
Step 6
Add layer styles: Drop Shadow, Inner Shadow, Gradient Overlay. Set as shown below.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJE5q290EFfK_1GIB2iFRLD-1oV7Wot9pHrECJxXx5sPAeDg22zgmwjjFUQ6t5-1II_3AwOKHq1jfdSHU16UBaC5hV6PjCVgpJFT-gH3rcCo57q9eoBKMbBpbL2SD5j43WJOfD9QqcSs0E/s1600/6a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblro_LJTIgKnYAwid_KBTl6_EUY-EtYCId6qBCLKzETXDrKcwSZAvepnlHUPwKjSPCrbOt9rsSpX5ZbZaAklYlU07GpLK6TiZX7N7KoSoeELorG2w6V8LyKFZTiuyTSdi3V9WsWXzNhct/s1600/6b.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXzkxVPUy3yppP13eflJ43E4KH28THtK26c3pTytq3vj8xo3GYAZOhBMitjieSrkVA1PpE6CRQOnMGVxuwR0fUXd9E-NK7oDFrnHfC2PHDqhGnmOMVovM8Zns8XFX5ddpv2Z-wQzC2JJg/s1600/6c.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs8LIipPfhhyphenhyphenJ1kmXvZvD9LCyBNFR_zOInv7F6H_gLERqZq4oBryeLq8JeP-y2PeyF1hv8m8MTfFZVTZdz-VDUaPFJOue12KnkJ5RzppXKaxv2FncLXixrKVP7YC09OBda2pBpQ89-zdS/s1600/6d.jpg)
Step 7
Activate the menu Rounded Rectangle Tool with a radius of 20px, before change Foreground Color Set #CCCCCC silver color.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFmvzbS0IRqsznVONjfmrKPIRxXmgmb9MZVbXrp7w2lEq24RIo_11lw5eN9nl8G2SlA5_Ymx40w54m42zW5wbeBtKDvQ6btzMkEHn0v_Ck6nuCYe3Dy3LEPKFuPNSOJip-5VB9lqShSy0/s1600/7a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqma3kU-YSw_YYudiJiRWdArwZoaIUwUQX6cvtRTUMG6hxijLUFrF6Hf9pTD2_5qwBDyx7Bhgs5OOSoj-YRKZaBqX8bOO70xa87nQUN-94TJJi75DndxQlk1kbHX_ewk4S1DzuRlS4npU/s1600/7b.jpg)
Step 8
Add layer styles: Gradient Overlay, Stroke set as shown below.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdM2dfFphLBIx6rzJhZpgXu3Hpkyl3cFhbt6tvSGBnW_1QDnUPliZdhKsIX6goio_K1InPexPRvmiQ0myb6ulArfhHATUv_lvB74cfBYVLgdpntexykNELElrjQHuNOLdzEQVbEIQ2tN_/s1600/8a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwMK_x1qKv_qIh9ma67KOqijzK5p1OWSF3MHtqsGeBMmH1qXTgWbFfmGsiMjEdbYvZGXk8cTQMWosqRokThp9APkhb2Dvd-gI8_zds8TO9MqPZS4-pVTP2bxUYbsN6uw9PkpskIG2bEIC/s1600/8b.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKn3r43O0x7O7OP65at3L_jgyDo0zs1dx8vAZYeUeivJ08Q9hATFFZUuMpo4lLdLa1vD3vXeWq1sGsr358H8Pb2OuzezJAKqM2GhnvU2VKEA2OuOOhmVgb4LMJkWJL_b72l6IFQnm9S1Kh/s1600/8c.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGomoqCxTHHdkWHZaigGAOCfOhg81YEB5WEm20InTOOc1q6-cAA1oSkzT8aqoSXE76Eofcmsn8dXEHuzsQ3LCjEWvP4bf3oSW_Tk0CvBzvKzZMQZjmPzHry5T6eyL-xBswq6R70P6BQLf/s1600/8d.jpg)
Step 9
Use the Rectangle Tool to create a box under the Shape 2 layer before you change Foregorund Set Color with color # 171717.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpr4Y4NVq9IK5LgU6PKotIb4Z5GOToOkQ5bgckqOprZhmid1psQ2xNXwnzSM8TrXfmBb1b1qZdUE6AwaA0YQE07dFXYn_8MgWQLyDmHxx83zjqsfdFr9ug-D3E6e-2GJ2K7ZJhIuc45-z/s1600/9a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioOGPrtaK_DDCtCOXG50ByhNmaTCif2i0Gff5L0wBJXW2TweFV6e2YHsVFeCptGo3YvJv_FIJKhO_tRKykr9hOg5uznCkJtvCL096-qGTWCQoj-qZR5EjnLo3fERg80oNjFKjv5vwc7127/s1600/9b.jpg)
Step 10
Then select the menu Edit -> Transform Path-> Perspective change at the bottom of the widened.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjj9PViis3ZbTOSZl06BgQbLEZLibhVfLL8olPBz6NrbFrSBFcLoqZw7F6pA9D0_sbuaE1-MyMSn97IrTHRIK7-KiuDDkJhPXoh-SN50HMKpP-j6I8mtPo_O8ELrZSgrl0gyvszwPDLAfj/s1600/10.jpg)
Step 11
Add Layer styles: Gradient Overlay
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFs-8CjE2JrcJaTHHPSHE_8mBHiXTGeTbTUU8YRJLGaxPro9NdyK-OjbIVlt-GLJ5DppGCkLTQcvV6LlDy3ck1evZtwWtLCARMax8S4Yzz4zH9LwdCWY4MX25aEFOqfL5wbCTYiFhS8uI/s1600/11a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgbot5PvB9vZXIyXl7W8O0rERdplQKBMeYXctWTEjSdU4bKIpD5Krts9TaO4HQSJd_KxJdbsJ-oEIT4gzi1HlJaSgY9I8oFPPs92WiXEnXE2ZzIb_jHBElfJfVcqU4IZwlypa-MZrKuB5B/s1600/11b.jpg)
Step 12
Activate the Ellipse Tool to create a monitor base
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeYX2o425Kn3b85q4_lMitKPQ_PfWcyQtbDoXsutLYAthnPDu-rOirRc7-CBFwK2O1TIv4YgpMi3R3FPZAP-rhqA2bltNXaOfa9lkxErt91lSDh7k8UBqm03rGs79rqmV5HNWVQU1fTRc/s1600/12.jpg)
Step 13
Duplicate ten times you can press (ctrl + alt + up arrow).
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vDEIdCRJlwHrcStsVlCpq_3l4HkuF13076DN1G_HyEzeNElevZHJ3lM0vWg0mCikkdk0qxDun0puGtf7rHPQp6EohMmHlYqKubTOYTztbYvpCtdoe4ypzYkFg96iUF9P70Zx5TmouK2C/s1600/14.jpg)
Step 14
Layer Selection: Shape 4 to Shape 4 copy 9 do not forget to press the shift key on the keyboard. Right-click and select the menu Marge Layers (ctrl + e)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkvCZUtTTCcpV2VW-BCJntZSVG9dF1ULfSTe2G5qikNTnEhN99JPFqIL2WLjmPw9oAKyJLijmyo97DIDJ6jgaHowWi2Fo22-PrR_GNaSqnRVP3rZCryRkcO19jVr6NNJIsEmqPFMrj8kj7/s1600/14a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EdBKFsJupFBrft0emJHXABfaZUWHrQEdqlnBcT_-BvVWyiaRbZNl-iJ4-2fFtwrJHkCDwAEhc52CbpE9zIHepii30_5QorUi-fNVOQHqPMKYYtDOeMfbZXhnuwpgIYzbINItCFy2W3Ao/s1600/14b.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxydCO741Aq_LT19RGa7VPX28A_G7v0YFtbJ5U8CcMfpFyHH2sktZrtEIkfhVpfi-ZSESab67fzYtqMEI2MxubtB29nuUu5j_UnCiiE7cqDAqM3WwXAAQwMwJeVYtu4wUFeQk2_o9ZwsEz/s1600/14c.jpg)
Step 15
Activate Shape 4 copy 10 Layer and add layer styles: Gradient Overlay
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHLultIU_-OQE2D-x8s6l4v9P4CAdKsCcnKCgphHnQsjP3WT8QJrPsvHNpiUQXayEtd6Knv_Q0KF1Ke9RJfA6Htl4i2h1wqcPoIvYQs7gm3E3ZLZP8zwKaGDzBfWT3s0MizsjN-tcapI12/s1600/15a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwdeBlZrkuwQWGm4bwftRcm-VHIACA6xEOLK-cd-VeizWjLZwtknqDIC_nR4YaRWoEGPEFIuQtz4Oek7Y27awefU3A-5mel3VLE72-e1Wa_q3Ddfh0auuDh3TIk9-jJjmZmFAlKWFVzy4/s1600/15b.jpg)
Step 16
Activate t Shape 4 copy 9 Layer and add layer styles: Gradient Overlay, Drop Shadow
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8koZbjK0Yy2QpelzzdBexgnvC6aTFvYC1VvZbifb9gCs7HRODDt6Vnf2RcCn5iac6XWfGn4WGuAFsU_PCsf5E2x_-uZBB2TVh-pQhPC2JfVxsGLxUoe-X8IvC56eU-Rokmpaeiiepw8zs/s1600/16a.jpg)
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf3k9LE8mdb2Wn_LB7zL_n2PDUld3CuBM-6qBxEaLhExKH7RoEPRibKpujYQdNCxf42c4p0ggeUhZhj4AXrLnODvvjG0K98qmag4QLqIhLyGNpQMVdiJE8-h4pqsK4t8Vd_6UcikE_8JTN/s1600/16b.jpg)
Step 17
Now we will create a shadow effect on the shape 3 layer. Activate the Ellipse Tool create a circle of black color like in the picture below
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqUYCOGcpyUXldXl04r9mBgfEvkwxr2LR7zfpxigDGuW-LD_8dnshYM4MZfFF7YVPaRgnygnojeAr8sryMjxXtmPSBWKZUPzDhyphenhyphenuzpmBDZ_Pp3XWUP6ODVlIlh7ymw83JG9C1iRRnPQrg/s1600/17a.jpg)
Step 18
Select Filter -> Blur -> Gaussian Blur Radius: 3.3px and set Opacity: 40%
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpcHINbDEB7BQlrzjRTHCL8Ax1KSAbGlr5KUkOB95De8HR_HX9DmRGA8FMS1uiMfTqLk2mPkGuPRRF91SGPDzrbgFySXz-XMbc31eIb7w-N4682KDhd_Nu92NuB9XAAdHxDESoJHG_W-A/s1600/18.jpg)
Step 19
Selection Shape 1 layer and use the Polygonal Lasso Tool create a selection like the image below.
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbn688EOgoCElqalfdbdFSmoIkRkAThaBlpptRAwOYBaVDarjgv1ORgd6Aw_2bmbCFtIXsmQjw3K0tlZfdkZ1LnAQgNG0gx3ogjqzDKjumYsUxa_pmSY-rxlo481gLDblKht_WFjTEe39O/s1600/19.jpg)
Step 20
Create a new layer fill with white and change the opacity: 19%
![Make LCD Monitor In Photoshop Make LCD Monitor In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqYCWx2JP0ktm7zs5_iO9INPd1myZtHCEZP1ZT3iNqNZ1tTfOTGCStm91k6OhW5A8v9xXPJQazBdkRABKZgknLoqpxtyUjiCbieYqxBDD7TTKKaQOMn1jWuvqdED3Lis6o7WQPRbX651GO/s1600/20.jpg)
Comments
Post a Comment