In this tutorial I will teach you how to create an elegant vehicles web layout with a light effect using Photoshop. You will learn how to use different settings to fill out your canvas with nice lightning and blending modes using different stock images to create good light effects. Following the steps of this tutorial you will easily learn how to use different tools and tips to create good web template. I hope you will enjoy and learn something from it!
Final Image Preview
![Create An Elegant Vehicles Web Layout With Light Effects light web template Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tJJpvBEDHp0T6Zsf80tSgVuszgfZQ1IzIUOHfmgys0VTLSPUZECWImiJD2af2yS2wl-wBw8yGWdSbhKdcJIDcndd2vlNQdnASN0u7WVjjEH32NNnu7bQI2Ft9KirMc4o5GjS_AMKBGy-PeQy1biTqBdHf2x0TX_c6b4OYHX1EytQ=s0-d)
Stocks Used:
Step 1 – Creating a new file
Open a new document on Photoshop – 1200 pixels width, 1500 pixels height and 300dpi with white background color.
![Create An Elegant Vehicles Web Layout With Light Effects 1 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_stCIbIFICED0pQFh5gwJxhHpeAH4e56HttRzgZ0XvMP8Ce8xcTRuooEoDl25HUFJl0x1n3_Inx-rJHQqcRXdc5WvRnaQypSMq5J77l8--hJ3tHPN9SiRK279mFMcA9GjIDW8TdGhbYqb00glwdf6w=s0-d)
Step 2 – Create Background
Open the Background Stock, then drag it into the middle of the canvas after placing it into the canvas we are going to Desaturate the Background Stock by pressing CTRL+SHIFT+U.
![Create An Elegant Vehicles Web Layout With Light Effects 2 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sXMPpum1I0SM_OARlFHRostKLKA9sm9XJbCLvWZa_DC6B_VWNp-ejJ7Hl3L69Klodr-dFc1pFeFze_-Y-2EfRL9gklUS_p3pGRUj-QtLsclX5WSkgyrNJCSm5jUOIYnKpPDO2pPvCzcgpdxfa17IM=s0-d)
Open the C4D Stock and drag it to the middle of the Nebula Stock then change the Blend Mode into Overlay.
![Create An Elegant Vehicles Web Layout With Light Effects 3 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vnUEOEputmh_fs1jNs-QL558wve_82QfYe3iZy7Nh9vXgLqZ1L-xfzhD6kQ3zwKf6DbPc7cWWRdBws5-XmFxaYdkspqwEhqbEN6zZto2ziYisdCOhwsBwpICnSvyjkTUDqpCn5GprUyCq-7VVBaA=s0-d)
Duplicate and Resize the C4D Stock to add more elements to our web template background.
![Create An Elegant Vehicles Web Layout With Light Effects 4 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ssqH7WnYAsJD6o3sZi1gN8hNbGlnmgEqbY4D0FRv9231CkG8xB71P-XEDT2OYjKPZRxPVBQzA6daud967h9d7oW9kS7KtWear3d9tFqZmSvOhfmnSauOdqYZdSLEcm3_UdzCvKHFysgSamBVrcRCU=s0-d)
Add a Gradient Fill to add more depth using these settings. I have used black and transparent color only.
![Create An Elegant Vehicles Web Layout With Light Effects 5 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sncT2gjd5xL2GOdzBC4w60wxBWyJR6wKo4Uj5ggt--k8-SGABhjH9P9SeJRfu_Pu4zvrO1Ln8sb4KttqbNHhGoNRUmLYFsiGy30kDxE0PWiB0rLK6BFLUFZXFHQ8it7wZ802LaBU0V5UcdGcuNxE8=s0-d)
Add more Gradient Fill.
![Create An Elegant Vehicles Web Layout With Light Effects 6 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sx4TjUEz3Xn-bKWy9bP4EccAt9G5RkqmOCxg87yAi-HMm1POobdbgbvpZFEORHiGQ-IaHbmQrtjXjUkpNmayPTMXgOcShjZEDFR41NZK74ZNpOEHaEJYKVuhhHqEb_w4xjBa6l5GLWFm-fXBMmv9o=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 7 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vMXVHQVfsO_PtZBB0qfuMEj5pnSdToTq-UaBzdZit4n0Zhw_F-YmvaWpA5zHZsqp61hPKoZG1ZmtFe2tXfk-Frw02qUb7UOoCpzsT_Hw6VjIp_oSolzmxahpTVnBLixmjzN7xBsUyRyLpduCiEP8c=s0-d)
We should have something like this:
![Create An Elegant Vehicles Web Layout With Light Effects 8 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t6z2Gy0GifdBoI3deaMBzZchW_TNc65yMgPuZi52f8lPwIuaWgAgersbyzeMnqoE3g4UDefTAT2wYsGWPdgWavhfQjOwRBkpNrkgT4j8cKbhLZapSGerdhTKvYfnBfZBl9ZVLeK1dtwm3TKfv-wlU=s0-d)
Step 3 – Navigation Bar
In this step we are going to create the Navigation Buttons. First we have to create a Round Rectangle Shape using 10px as its radius. Then add a effect Gradient Overlay using these settings.
![Create An Elegant Vehicles Web Layout With Light Effects 10 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tjLP-J__q3or6Lu_q76Ng1nr0HID0IHAb9RRmz08pnMjTw0SfE75miicL7lDtDXs_n_ZBGFPDesYGDKOipVfP47JqV-IVcXd9ZTf_0SE2DQrUQTRQICTMfg68s1Bj36_w2EdRHL4vN-cebgJhVWCAc=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 9 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vo7jTkI0Rgs8SaG9KIfI20NQpXktmEnOEywHqHRz2wzXS5IxITlQlJWR-gYMaWEe-7_hJE9cSOXqZ01vufCcOrrnu9azuHw8ile0VIb8Wnp5ShTRE45awicjpY9Lhhp5SXd0D3EIo9rnG95YN4ZZ0=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 11 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uCgkYw4_F_hG3QBNrOnQtjH35tDBctVrfOrY4yLWrc4SKzPiTZpPsljhZTkD0d7_hfb-8MZm8iAWndk04TnULWOxf5kgUAIS7ECv1vGlJvfFaMIVYR-FRkb--LJyZKgyM6YdYYMWOMXsLJGkhMY4A=s0-d)
Duplicate the Round Rectangular Shape by Pressing CTRL+J then remove the effect of the layer and resize it. Make the duplicated and resized layer above the Original Layer.
![Create An Elegant Vehicles Web Layout With Light Effects 12 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vIqRcBGDVtMZcOpHD5GnTa5rwPDKkWwODTKP9qkjCkihN2N5J78fYtIzNEyEpcS6c9eZo1WoD47y1sRgvLO7lrV-Bn2zk4QtTJ-3AZmeHeSYao4nPu2OLWrSE1ZvWJryFaGX-EO51SEru8Q6oFz9I=s0-d)
Make the Foreground Color White, then Create a New Layer and select the Marquee Tool.
![Create An Elegant Vehicles Web Layout With Light Effects 13 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sY6fAeai67QIwELOq_ed_KLd8puY3SEeOyfXkH8Mp1PtSlvmRLdlg0vrVUzpMOmRBvfm8f0rhHnhQXb0cWX1AetNc6YYG7mo7GQGGOSd9cyRm7tM7wSOCG5hyH3M_CRyZagjByglKbu-MG5ZxOIppJ=s0-d)
After making a Marquee, right click then fill it with Foreground Color.
![Create An Elegant Vehicles Web Layout With Light Effects 14 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vsIOoo_j9kaUTW3uu4bGZogDS4hfRNyJOukFlTHRqt3fYfDFhi4dhbLw5HtIteVl9e5xPIzGhpVqu-4CJMCzScCNNDGEN51PZmQy475N-jyle-9SErzSlaH8mInveGH__jJICpGbzr3o3UT8NniHeG=s0-d)
CTRL+CLICK the Layer of the Round Rectangular Shape and it will create a selection. Do not select the Round Rectangular shape we are still in the Layer which we filled with color White.
![Create An Elegant Vehicles Web Layout With Light Effects 15 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uzMkXLjo8O9gCgRf552YV6WFdNTk73YDRkXn6KWKe-cMkDRHL53fCL_JQ5v-7IWb5tjBeTMuvU4Da_y5YMlersb_QPEnHF7qrx3tXKmX7BSEmhYYGF_ekaqSu3z7_6L4qpsPPT1NQ0FgC8BjGpscJ3=s0-d)
After we load the selection we have to select invers to delete the outer part of the Round Rectangular shape by Pressing CTRL+SHIFT+I, then hit Delete.
![Create An Elegant Vehicles Web Layout With Light Effects 16 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vsPjDB-qLZNZKDU5-ghdq-ye885bGSRReD-xDYvZb88MBDA7adp8R5ZekPKZ1vZI-nnBW1egqleJUKTS1Zk38ad8c3kMbyFE_mRzXZsKe-Zya9sHdNW7IeN6n61Z24unwYsnQxxCpLmJmZUcFmyuVW=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 17 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sUoM5LhR64aU9h3FlJCC_ZF0rVA4T7jEiN0s4eyZfbnceRa0xCzboHQ-i3mZRNAs9cB-gqW8MtIZj-hl1NJ7bqm7aXSPYtZ1u3BJ3fyZwexhEyehwFN0TQo1NuZb23NAG9kRaM33DtK37svaVTcW4=s0-d)
Step 4 – Create Menu Divider
In this step we are going to create a Menu Divider, I have made this in new Document to make it easier for you to notice the Color I have used and easier to understand.
First, Create a New Layer and Select the Marquee Tool. Make the Foreground Color #282828. Right Click and Fill with Foreground Color.
![Create An Elegant Vehicles Web Layout With Light Effects 18 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tPEaCmg1KO8zCnnfR68LtNoTiIEYPmtCoaPkHa_SQXB1vQUNUG8jyqmJeZXmXdhj6p_g516NvrTitfVNSv7xXvjgEB7FDMnOAT-lC02pzFEn1nrsRcsuzV1VU8Cf5UYaroh22FHRpfD9jPD_J0aKU=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 19 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sRQyc-NP2fv_SspZR0QRp6VcJobCq3NCONThWRXJ_I4yLotq-hdIL6vcGycg3Sp4MQu67-4KgkIvs13Y56xvZq73JctV1l8enrx0DzqFkxrFSOZJB5daKxGRxoZSaANMai2zlJpN7uUjNJZzhOyVAh=s0-d)
Create again a New Layer do the same process but now fill it with #181818.
![Create An Elegant Vehicles Web Layout With Light Effects 20 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vhnkcHOHPnL_hpLJlnSna_EDf7yBv5ucyg_mlpIk4nToH4wnFKTrGZk15Amd-Jbzf7vK6FmcnDCN9UU1_Roc1hq_hKUcBgRHUEg_T7xbgbuFQx_8tVQwQfFlbin7UtIya2wSEfJ64UVV8CDpHRRkY=s0-d)
Put the shapes together then Merge the Layers.
![Create An Elegant Vehicles Web Layout With Light Effects 21 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uSnZHg7olsvwLFg5I4GCrZYvU73jHpgbl4JK9ij4E4RxMzGMSXvSh41vzz-tvY1d147pI52ejU6CQNOEm2PtpaMJKilcF891a07ibQssrEZyTuepFdr3NJ6IiR1a67-lf9muf9kE8yMVP_JkVFkuLj=s0-d)
After Merging the Layers we have to resize it.
![Create An Elegant Vehicles Web Layout With Light Effects 22 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uvYjqxw3h5TMaYo7CJT75P_IIqGre3OBZ4TXpYHGvrUFc1qTz3rXrf7iXT-fRFs6P851AJYdykS_o9QdHsyZgDujbAkGBmiURN4pXM1E2QqidPMYztl62xweAUZ_usdDIxi26nMT4IyDs_rMqcE-wc=s0-d)
Resize the divider until it fits the Menu Navigation Bar. We can add now the Text of its buttons.
![Create An Elegant Vehicles Web Layout With Light Effects 23 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tGWzpYsg7wB2Ky27fDB0lM_YMxHQDdCA7AUs-PG6aDyrgtoMpA9JatArvkQJOZKUseLrz2bHUy2vQlLlAHZLRfSVGIjlhldIKxnu07kbGehpSB-AMVfXlU6uvTpK1Ae5ZF3AUAdqjZPWGMh46leO0=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 24 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tow2DBjU6cZi1NTxtUcbYQRN4ST8RMnFO0SCvabYZMR4wL0zPvcwQVJdhcjBJRhSanDhhftdQgwTSi3U6lnmMZO2SLAXUFCU18UwflN10CpTlrmLW0680gZT_-kiIPQ0WLQpXRjyQoppxIhi1psAlq=s0-d)
Result:
![Create An Elegant Vehicles Web Layout With Light Effects 25 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v7eEEjcQ2Go9G3ubAN6dE3rwtIYHFVsIkMLsYgjcpmI9-MdL6WdBI0AsBIj1hUGohF4NotdeIE765PNb3FDG_fGPYOMdAelm2U0ub_WffLSWUqlzm9HfzO834HAclhN7OadrZKFNQsxucW6A5Oqo8I=s0-d)
Step 5 – Main Content Box
In this step we are going to create a box in which the details of the website will be inserted. First we have to Select the Round Rectangle Tool and set the radius into 10px, then make a Round Rectangular shape into our canvas and make the color black.
After creating the Round Rectangle Shape we are going to make a stroke using these settings:
![Create An Elegant Vehicles Web Layout With Light Effects 27 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vZjGva4Tlo1u7UQDoBXVU-GBKYWXL5MGzmSlz8jgGtbcp3Zd9HDVRNRMcPKLvw9oudzTCbbM3KP281is93Ph7yIRGzOjMaqB4_Rw85r35QTjyQ-6kF3xsavH8O2rKlnfRUGPPRsc0JodkLPnspcJc=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 26 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t-Ur7ubXTVTTcFxbWhX6zSqaRkNGG3mtEtF-144hoMdqN0_xNeyLy-_cZxglZCl-BXF56-qagwJZxIWsgp_x1mbR7q9UUNnAC1Id0AUtBV966ktg1dxZvLvkoCTCsm8r022intjGF6onD_w6ja8GVo=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 28 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v7ejs61W0trfuJ3hX4vT00plzL94YWcqdVKc2LyGYKheBaKhIdqxMJqFwBe7G6tb7S2xyt4bOmEBsYB4Wle9vohYgrkWRgJLjLTP0gJVaVcgNuKyo_SJMGi4koLWO-mZlV11qhm3_-YlHiTFwn8p62=s0-d)
Create again a Round Rectangle Shape using the same process.
![Create An Elegant Vehicles Web Layout With Light Effects 29 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_shpzXeO9vYbZ1-XcrVGPM7izyntq3q5yFJjhe9b62ZkoGJQczf0vvP0l2A6cyMgSiL2v2WeAHzBLfBlaNl9tyV1xAjPgYlpdHdg2ZVhWQXNha2v6D3C4TwiyOVzoddW6Qw4o3nML07Jh3aYDQac2e-=s0-d)
We will add again a Round Rectangular Shape for the pages button just below the Round Rectangle that we just made.
Make a Round Rectangular Shape with a radius of 5px and using Black as its color.
After Creating a round rectungular shape will add Stroke Effect using these settings.
![Create An Elegant Vehicles Web Layout With Light Effects 30 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s128NXDIZA1-A5m2UoXFrzREs1cL5iuerUjrKmEBWzo9C2x9kqMOakoYwMQHweS3-8UVgyufeEImho0C9tkJ_L1VcBQjlX5LU6cgPf_KQ-P0djq63hwVYF_AkiHJuxhtUbi7UtbPUY7K9F6nxbegQ=s0-d)
After doing this we will make a New Layer above this and Merge it to make the Shape Layer as a Normal Layer. We can do this by clicking with the mouse while holding the CTRL buttong in our keyboard the New Layer and the Shape Layer then Press CTRL+E.
![Create An Elegant Vehicles Web Layout With Light Effects 31 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_urOz44vdiAd0DQVafkxvxpPhqkY8gjBRawQ0KHT2_SfRKxGHpfu0gIHphl59jCXs6MU7egy8qv_qn04hExrlK17nFld7ADeclbGYvLxoSaBdD4fHd7BnzomR2zUzHAapqFJFc4cQy2Rk9MD4GFo6g=s0-d)
Now we will make the upper part faded of the Round Rectangle Shape that will be used for the pages.
Still selecting the Layer we are working with, we will Add Mask, after adding a mask select the Gradient tool (G) and make the Foreground Color Black, drag the Gradient Tool starting from the Top untill the middle of the Round Rectangle Shape.
![Create An Elegant Vehicles Web Layout With Light Effects 32 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uiOM3zOmz6sZmfKJlgvAeVHbjOW-GIwPs3Y8Stp7Yna1LoeXa6bUpvIPfLSF8_Fwa4g5fv67hxpR8z82VgqKg1QAEssc_ot7cBkZZBd6NYUdg5a7B8VAryXdZb-zftKWSljcQDkSe67BFgfi6Xxzsz=s0-d)
We will add more gradient effect. Make a New Layer then CTRL+CLICK the Layer of the Round Rectangle Shape and make the Foreground Color #636262. Select the Gradient Tool (G) then drag it starting from the bottom until the middle of the Round Rectangle Shape.
![Create An Elegant Vehicles Web Layout With Light Effects 33 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tu01jqbY-5b-DppIS5YvKa6ixRPI1zI2f5tBugMdVAWIF0KULLD8Kxrw8NGj00IFZvpfqZhbyrBhuE23trA2b3DVU9zY7XPy0T-9D1A-QBWtTF4wJ3JQz-ymwqNDdj_j5tv52cSVyvu4V2Z7nk1Dn4=s0-d)
We should have something like this:
![Create An Elegant Vehicles Web Layout With Light Effects 34 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sm0ls3TmJeaIDApkR52_7qzH6RW5CZnVy2_JkpZw4rvTpnOeK7vrOthdO0HG_TNzoXpcNrtDZci71pYjQwVRtcDop2gTgCMf0ttLQjFPbN1eLSDRjb3Z-K7PYus2nhqtw-sVV0ONK0e9iV6lrtkFC0=s0-d)
Step 7 – Create Sidebar
In this Step we will be creating Box and Buttons for the List of Vehicles and Parts.
First we will create again a Round Rectangle using Round Rectangular Tool and the radius is 5px. After Create the Shape we will add Stroke effect with the Size of 1 and the color is #636262.
![Create An Elegant Vehicles Web Layout With Light Effects 35 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sUwvRVsRMXwqN_Tnld8VhkE8pxhLUqOJbIFV6jPZMFLfsN9JCbOgfb-ZUKzX2rISjogRmGIotU0eERYddEcl8c5HtBYuroJvs-FPaYroaHLIINsn-A-59W9AgJMNKHh5IFVVcnYmC4YBXH6L-Vk9Om=s0-d)
Create a New Layer (CTRL+SHIFT+N) then select the Marquee Tool (M) and change the Foreground Color to #0F0F0F.
![Create An Elegant Vehicles Web Layout With Light Effects 36 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sp3jN1lX3PL6qRSm0ykWxxgDE3oJ12fUdn9h13ZBXLX7UjTU1wlhkqzNLLJr_xpVlZklALHl4RWy3-6oF8QHqtRGUkeEkLhGujGML9BPPp84j8aHxwx5J_vuDGnH6FA6rlRtl8rpT-SZbN-paBcBY=s0-d)
Again Create A New Layer then CTRL+CLICK the Layer the We made to load the selection. Select the Gradient Tool (G) and then Foreground Color into #636262 then drag the Gradient Tool starting for the top up to the upper part of the Selection.
![Create An Elegant Vehicles Web Layout With Light Effects 38 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uZ2obxHHv3s7ciMUGL6stcXLApk0Hbgy4NRMrZsMRzlt7P7afzlVvVA9g04_0N7PAUCEdhVa7h6bi9YESMb--29w-o_-r2iMXLwtwW2tk9zPHOX5Ecdv9Xm_Q2o3_xK6gJkZn-2jEPTVfnG8Z6zCg=s0-d)
Here is the preview of the changes that we made:
![Create An Elegant Vehicles Web Layout With Light Effects 39 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tcrjNC3pocF5h-Ii2IZLVSDxxtW3gmVZGeD7Pxy5kZ7WHrdLY1hPxgZlif8yZBFjF71G801qlhjaJvKdTh9NTiYKXQ4em66t4ximnU3qM6eGIVetTEO5At8t-sADCsV0eYCZZd4BFdSnDulP0ITNAL=s0-d)
Create again a Round Rectangle below what we have made for the vehicle parts. Just follow reapet again the step.
![Create An Elegant Vehicles Web Layout With Light Effects 40 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_shCSCtRIvg-HYSgw72LqNfkjWGL43dqqhhgns74fRdV2e-cTShRNHTBxAZNmQaUwTU8CLaU8Y1IkGC9hsWY8A5VF1xdqCouZKcv188RLZ16QKs2C0OKxNrtSrhiq-E3kUhHr6E_0p3bb5S-UAuAsUc=s0-d)
Step 8 – Create Thumbnails Divider
In this step we will create a divider for the vehicle thumbnails. First, select the rectangle tool and make a rectangle shape above the round rectangle shape in which where thumbnails will be placed.
![Create An Elegant Vehicles Web Layout With Light Effects 43 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uoidu1GagZGCjswG9uWFBBkH6JmnnBNbyF-6WZeTRxhAA1zgq0Q9eQqZMZD3jv_bG8Xi8UkT3KjZ6glKLPNRUpjXg8W7CNox0ar8F2P57cwm693WoQO5NuJ04F1k6nwxoX-d_13jkSSlWw8qES9xk=s0-d)
We will add Stroke effect into the Rectangle Shape that we made using these settings.
![Create An Elegant Vehicles Web Layout With Light Effects 42 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vhwBZpGpu8nwD8TIJ9orjsIVWdxVIo6l6y7gp2yds-pDyUrs2aQ2ZqsIy1iXe9QpUfMbYMf7RIY5SUs8xHszQ_ymInfUSyQ5d9OV9fFR8eQarAvcCA7DepdCqJJHL8aL7TvfKFu3wGgBdglmTCxAY=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 41 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uL214sdcIafS1CbWIKIdWDntxeHuEMMuq26YKXQ9Ra6K2NG-eeezDKo0TfjNlVble0683aeBuDOG_3a9xd2PAAzokhQQJ-jq7nY9bqHZ7nncST8MfyXroAm8p-QB-Ms3c_f-CWtRnO5NqM5ku-Vt5y=s0-d)
Then make the of the Layer 0%
![Create An Elegant Vehicles Web Layout With Light Effects 44 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vnc2AUse66X1_MXP5fDm9j95OIUkexFDdiwUl46ambbhjk16EaczF7XSTmx7G8EBvFSxoN-uuBz71rkvp-CANfBxlu_ezH_Y12nyFH45tZnErmSztjf82RU9GUu8kHSe3dF_1sDyyM7jIWl2QDLGed=s0-d)
Repeat the step to add more Dividers.
![Create An Elegant Vehicles Web Layout With Light Effects 45 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tdM6qDATOESfKhlqKC2v8L1VwSSncMiXB-cHrnaQULDcJ0S6Bm69ECNFbJ5waHMHkIQfHAvAVLEcRj0ilhCauvS6mp61PWV65cyH8HDD8C0JEOOTAdhvijJRiUXPqPohHRQlYJcJ1jpcY9ofmToz4=s0-d)
Step 9 – Sidebar Buttons
This step we will be creating a button for the vehicle list Again we will select the Rectangle Shape Tool and add Stroke effect using these settings:
![Create An Elegant Vehicles Web Layout With Light Effects 47 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vT3zMkKmaUzcoTQaYDGxnvmq_MZaFiUrl64HAehSLDzWFUqewP-zzug2Ho8NPx98PImmd_xOuNsGz8DdPkiGBBfyqZzmx0vSwci7WC-ufGgm4iQqks8MBm1crD_8ZcMC1WWBENx8p8BscEJjvPSjBZ=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 46 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tPHhjxnSIx_L_rShyuQ-Jra6D3yPzVNFD53fWEtKf1QpUBvFTtN705qFTe3VB22BHhU2pjIhoGSOBEiG4wM_xVECmu_krIiHNVLUDHiVRuKu2fJGNe_QdXt29mW-kQoCqI6cNRg385h3tBf8iLnoWS=s0-d)
We should have something like this:
![Create An Elegant Vehicles Web Layout With Light Effects 48 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u7e_9gnJg9pIgh93r-VG-4-AnvrXDgmB0rquua8KtwGw7X2rRQqDbznJ2hmIaee-Ll87sO99f5Sj8iaYnNPi7GZD37a6OSkkcbd5-7p4jQMxhQc9Am8WDuUTluzdG4ETOP4071jC9ZGHaKeuYWDW06=s0-d)
Duplicate the Layers to add more buttons.
![Create An Elegant Vehicles Web Layout With Light Effects 50 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sIx5O12zrxpnxUxoo7xqNu2AR2AJfq_DmTt2N6egHq_FsgIvlCi6Z6nDLGY2mhhZiikRDAeBgAvM8QnKmU31SvltQzkQN6aAccG6gNVvyzzfWmLluAHdiVjLGaQcb7dymQ5KIta2-uIPlsKLhbxcWV=s0-d)
Step 10 – Page Naviagtion Buttons
In this step we will be creating page naviagtion button. First, create a New Layer then change the Foreground Color into #252525. Select the Marquee Too (M) then make a marquee then fill it with Foreground Color.
![Create An Elegant Vehicles Web Layout With Light Effects 53 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uEs3_Aewg2_qBQfJRZv_4ujL6i7R6aN36ds_cbSInnWJ2FRY2tFokLD5fUvTJmk1e5LFLMZBDryK3jzpLMGNrsSrZQlzvz7_FlEa0JJezNH--8iElYujd7oFEgSdR0EQKhuX8GsDkeXv3DviVtPHr6=s0-d)
After creating the Page Buttons, we should have something like this:
![Create An Elegant Vehicles Web Layout With Light Effects 54 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uyHognXWq-KjAg56eWPgfHqRB6Ur2vUWAyvFjnf-Xped-OSyy_xZlbkjDlpBozVduD9GGUEMcn4qhB-fhnu23xwXqa4nXlBS61xLCpEVjZ4WGP9pjIHW2Scqnp6MUOku5bLPUcOHRLTaMOhHaLPTss=s0-d)
And then we could add the text for its buttons, here are the sample buttong text that I have made.
![Create An Elegant Vehicles Web Layout With Light Effects 55 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sP9Y20XTNR4anVgbHF7fMG2ui4QEdzm0huvhgJwFhyvlUKwEu5sZnJcUxROctCKYBPR22XOXbkeqxIft1CqBU3Gxxl7HJZcdmnsrdY2qkpvWxd_Czs6Z0U2mB_ujdawizfFIqBXli_n2pmfpSQDze1=s0-d)
Step 11 – Create Search Textbox
In this step we will create the search textbox and search icon. We will create a rectangle shape for the text box.
![Create An Elegant Vehicles Web Layout With Light Effects 56 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uujNZvdxmNOYncpqpUDOQCujhjHXd4Y6LODnI72pMVIZJ0O_IzOfI_KCugPQW4_8Jwdg7Wl8uF5fyB2ZVVUsIKVhdeBvvNEOAZOzkRwLJGqGrr-y1GmTYfjmHqi4sKP_8p6H7_aGqBqEOW5C97vKgy=s0-d)
And for the search Icon we will be using the Custom Shape Tool
![Create An Elegant Vehicles Web Layout With Light Effects 57 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uCkd1KQVKCL7GKvF4F1zXegvSGlyceNcexZvp3gxgSb1APHgtN9fNgMAl6-Lqi_GyZroVqczW43k8fljAhRh9ov_CRKfG5tMjY1Enzipwq8oBVM3vU2jxPbNwz8A8zywNt1-iNRsBR-f8H1B0N-vUn=s0-d)
Here the is the outcome of the Search:
![Create An Elegant Vehicles Web Layout With Light Effects 58 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t8CKrBvm2G2Wlrl3utU_Df42zN6TPVUa8mWpVrcBfY3T3JmDBe8hI3OOMLP3XffBAkkNiH-SbQzcMlN7uOpzCZcfl9uCN4lyIn8_bG6bJoY4rgJmpRtMlLrlDGtDFhq6LYKms7jdubGuahYo7TunYn=s0-d)
Step 12 – Navigation Icons
We will be creating the small triangle button in the Home button in the Menu Bar Navigation. First Create a small triangle using the custom shape tool. After creating the triangle Shape, we will add Drop Shadow and Color Overlay Layer Effects using these settings:
![Create An Elegant Vehicles Web Layout With Light Effects 59 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sf_1w77jyFopZdTZhZpLcza2vcV2McBouEVYJnKmHZEHtq22S_2oFaF0HCSAh4NHeCHHOdqTFmY73FxAD2JpWVi7yjFEO2iUrZoTcXlfI5zhe6YQyeOtyWJskhXyWfkerGApAgBWtWsKjPvfc3zRaj=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 60 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t9tIG-GMQwLX30E2iyHRAeFgO8of7ompfcVwFtf4bKicOy32o0jffSO2V1kBs1Kz9Jqz77s9eNXPyFg4V1nSrvfXZIU5t8zWNbsNTzVF6PUyIXbYfZ6-SStclTT5Uu8E6FfVwDvWMS02KjGefEUbYG=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 61 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tCcbrRxphNF9YQal4mm6G24P32b1EQyiHJe0Puzzi18mn1Jd8kGN9fe1VCfnxMiukMuQiN78b_c7lnqstnlkkTnGYaySVwq0YzsfLgSn0htjECMhLxWehH6TtBbb7S9h3EMZlRUFYR8_5IYrQHB5g0=s0-d)
Step 13 – Adding Light Effects
In this step we will add more Light Effects in our canvas to add more attraction to the visitors of the website.
Open the Nebula Stock drag it into the canvas, Resize the Nebula Stock the erase the sides of the Nebula. Desaturate the Nebula by pressing CTRL+SHIFT+U then change the Blend Mode into Linear Dodge and bring it below the layer of the shapes.
![Create An Elegant Vehicles Web Layout With Light Effects 63 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tn-tA4DRhJ4GsUXaV2c_w9TuUWNM_zhfX82w67KEscHVjz5DRuHKZG7hKhk6K9pvW5Jc2DdlEilfEHGz-I06VKIDpUID5viK954iQnblUuGsJ6HD7vO0N109aeZwgzig4KwpmRvjMjo0jcO8ZG0Tc=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 64 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sF5Wb5U6CKJf5s7ST3EXnixUd2H6JoblLCsCNUub6rHyDqP1_ul5cLgWarV0zsQ8i3Y9pLbX94vyLEix0dXhxZUs4yVC5r2iFS_Gjqm9_8wwiGCr3BNpNNyNIaqUcbzUwTvYdOmW9F78M4SlwMH6Fj=s0-d)
Result:
![Create An Elegant Vehicles Web Layout With Light Effects 65 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uvUQX5op_OCfLoVP0CNqh4uMSQL1d1dKPAvYGeDnGdY81Dh9Kxqt5auazmhxKoVRVhUeywO7PwUFMJY1vsyTzVBIkqF22IDQbJkE6cfzDNuE4aUZXPatwcrB-DjxfUQrrUcakeUNUUqwoagPKVdNcK=s0-d)
Next, we are just going to repeat the step 18 but we are using Nebula Stock2.
![Create An Elegant Vehicles Web Layout With Light Effects 66 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tMmTHYdHSx2F13yJc-SnIyK8h6TNR_Q0KZ13bRGYRvY4KEmzrGnExNw-nzUFMIlQQzBS3dN2zY5TEXXh4SNY_Yz-mYr1uyVRi4p3FnvpMzSL9Kx9oPRbm-xqR4pfU-AQc1m9sQjpb4z1PRMQlDmK8=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 67 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uDJEGXJrITGOCmnoaKFgA8dS3WHBHIW5mP_NIo0HXX4yzWJhnJ40SubvW4evYtaV9-nK5p5gQVefW6m_H_jPtlXyLphLrssRySOeb-0rJY6xdGC8zIHwHnf6OV_C5_ZQw8QSq_KfiJX9LMmLT5dv5_=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 68 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vN0WPEyBN_kPbFSEPdxyxZXAewo22DTBE7LKxZybmxK9ahuGB1G7KrUr5Qa_46y4kkRM2wpiM-DhsFY9v5nFFfpH1-z8SkDjBZG1oKqSzbLhieYb2hnuBsvQug9NNPD-x2XyWHxiOti4R8BUyOgZg=s0-d)
Next we will add a Second C4D Stock. Open the C4D Stock, drag it into our canvas, then resize it.
![Create An Elegant Vehicles Web Layout With Light Effects 69 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ssPeUdKRx9eHJK_M7RCX5qZiTch4c7XgG53kmHsMGcwx-clipQS68LczvLro-YjoCW9Qt53vrXo9tJErBAfgtat9EHMRq3G35MuuqCSazMTbsA34kGP2K2d5yq77O8f_9e4Nlc6CiOlr5gNP2n3rmN=s0-d)
Bring the C4D2 stock below the shapes.
![Create An Elegant Vehicles Web Layout With Light Effects 70 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vHQ_xdGf0auYcvnsUu2t3JLxj9KNuPTem5P3qM3hP_wv0MELzw5P2ujkESBJmXsHDJRQsM7l-_hz3tt_MsNEYzrOOAIJB3pnvwsDZFtCg9KT7EHLABe8yWv1oEWZPoNJqPkfFVLFwGB60y7W866CBU=s0-d)
We will add line strokes into our shapes to add more light effects First Create A New Layer, select the Pen Tool (P) make a stroke; Set the brush settings into 3px size and Hardness 100% then make the foreground color White.
![Create An Elegant Vehicles Web Layout With Light Effects 71 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tskqffcYuhJ6B_8BimWIi3163I3CtPIjy5QbUAl1w1XsMx4MqpGxbcPFDrk8gSaaKhUKerFEIRx0F4NpnUjRulHrhLA1iCR63aaUVv4lJ5FUduSg9U6WWMsvFP23Nygueb-RbpVJDG1Ij8YNb2zaXZ=s0-d)
![Create An Elegant Vehicles Web Layout With Light Effects 72 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sPdhkR10JY8BmpXpTVhxY0PouNxmYXIdiSd0yZTsYMJe75KV1vTgyHT_hpEzQO-eW8Gux7AARz2i_7wLDMrpIXMZWkizIhAysgpyFNNGm5UfPB4I4Fa6Mv3QfLgElLeWBZZ-tj-7b8l0KYB4b0Bd0=s0-d)
You should have something like this:
![Create An Elegant Vehicles Web Layout With Light Effects 73 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sqsQVNu1PMKg7qUihG4Ljgtllq7qOmSY39Y0Zc8dGtz5sZ5LNwmD51pynUtNlStMgiV45t_1_HFseSok1S7P8sxAwzeyTDFpdsriESWbTH0G42EE5MEor5oRJgPDhtLv32DtfppfUgnaL8tKFilyXL=s0-d)
Step 17 – Add Light Effects to Navigation Bar
We will add a light effect into the Menu Bar Navigation. Open the Second Nebula Stock, Drag it into the Canvas, Resize and erase the unwanted parts. After getting the desired outcome change the Blend Mode into Linear Dodge.
![Create An Elegant Vehicles Web Layout With Light Effects 74 Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u1FfJKkbVU_AC9lI_15prXurA5pLzHRkdeUkOlzC9ZJJKesDJQbMi3r68l4OTc2o7EQFVBtq-sXInNlgT0WhbrBhh5zUrvEU7iP-O__LOAcQL7YJ8mi-fhQjPd5aNiQHBmTR1ce4GPWxN7A9KIYdg3=s0-d)
If you like more light effect, just duplicate the Layer.
Final Result: An Elegant Vehicles Web Template
![Create An Elegant Vehicles Web Layout With Light Effects light web template Create An Elegant Vehicles Web Layout With Light Effects](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tJJpvBEDHp0T6Zsf80tSgVuszgfZQ1IzIUOHfmgys0VTLSPUZECWImiJD2af2yS2wl-wBw8yGWdSbhKdcJIDcndd2vlNQdnASN0u7WVjjEH32NNnu7bQI2Ft9KirMc4o5GjS_AMKBGy-PeQy1biTqBdHf2x0TX_c6b4OYHX1EytQ=s0-d)
Download Psd file