Pin Make a selection with the Polygonal Lasso Tool like so: Pin Select the brush tool around 70px it has to be a soft brush! and brush the inside of the selection Pin Erase any unnecessary bits and it should look like this: Pin Duplicate the layer and move it around a bit… Pin Duplicate it again and move it around… Pin Erase any bits that stick over the navigation or over the banner part… Pin Move the 3 brushed layers below the text layer so it doesn’t cover the text. Pin Looks quite good, no? Pin Now just slap in the url font tahoma size 11 and no AA. Pin Drag it up on a new layer and it should look like something below: Pin Select the Rectangular Marquee Tool and erase the webdesign black gradient part, since we only want the black gradient layer to be on the “dev” text. Now select the Gradient Tool, but we won’t use from white to transparent now we will use black to transparent. Pin Select the text layer again and go to Select- Load Selection and move it up by 1-2 pixels. Here’s the result: Pin I have duplicated the gradient layer to give it a stronger transition from yellow to orange. Pin Select the Gradient Tool and on a new layer drag up.
Pin Select the text layer and go to Select- Load selection and move the selection up by about 1-2 pixels. Set the layer Blending Mode to overlay to give it a more orange-ish color. Using the Gradient Tool set on white to transparent make a gradient. Pin Select the FIRST layer in the rollover button group and go to Select- Load Selection. PinIt should look something like this now… Pin Make a new layer and using the Rectangular Marque Tool make a black shape like below. Pin Slap some text in those babies and no way…it’s starting to look like a navigation! Select a dark gray color for the text. Go to Layer-Layer Style-Color Overlay and pick an orange color. Click the button group you want to edit and select the FIRST layer in that group. I decided I am going to modify one of the buttons and make it a rollover button. Pin Now go to Layer- Duplicate group and move all the buttons around the way you like. Now click and drag them into the button folder. Pin Click on the layers while having ctrl pressed down. Pin Should look something like this? Getting better right? Lower the opacity of the gradient layer to suit your taste. Then Select the Gradient Tool again and now make sure the foreground color is black. Pin Go to Select- Load Selection then go to Select-Modify-Contract and select 2px. Make the color of the button just a bit darker so it doesn’t stand out too much. Pin Off to the navigation! Select the Rounded Marquee Tool with a radius of 5 and make a selection like below: Pin Fill it with white and it should look something like this: Pin Cut of the lower part of the button with the Rectangular Marquee Tool. Draw a white line like below: Pin This gives it a cool kinda “engraved” effect. Pin Make a new layer and select the Pencil Tool again with a 1px brush. PinHit OK then drag your mouse down like below: Pin Here we have the result quite nice no? Pin I feel the white is a bit strong so i lowered the opacity a little bit. Select the 2nd gradient option and make sure that the foreground color is white. If you can’t see it right click on the Paint Bucket Tool and it should appear. Pin Make a new Layer and select the Rectangular Marquee Tool and make a selection like below. Select the top with the Rectangular marquee tool and fill it with a darker grey like so: Pin On the dark gray layer go to Layer- Layer Style- Gradient Overlay and use a gradient like this: Pin Now select the pencil tool and a 1px brush. Here is the end result: Pin Start by making a new canvas around 950×950 pixels. Note: If you are very new to Photoshop or web design you may have some trouble with this tutorial. In this Photoshop tutorial, I will teach you just that.
#ADOBE PHOTOSHOP CC TUTORIAL HOW TO#
Photoshop tutorials are very much in demand nowadays because every web designer wants to know how to create a website with Adobe Photoshop.
Getting started with Photoshop (8 lessons) Still using an old version of Photoshop? Get the latest version! Lesson chapters Learn the basics of Adobe Photoshop! These tutorials are perfect for Photoshop beginners or anyone who just needs to refresh their skills, covering the essentials topics you need to know to get up to speed with Photoshop quickly! Use the links below to jump to lesson chapters and other popular topics, or scroll down for our latest Photoshop Basics tutorials!