Create a 200×800 pixel document in Photoshop.
Select the Rounded Rectangle Tool, set the type to Shape Layer in the option bar and the colour to blue. Draw out a rectangle as in the example.
Select the Layer styles and add a Inner Glow, set the size to 24.
Copy this Layer a few times and arrange them one on top of each other as in the picture.
Using the Text Tool add some text to each button eg home, about, photos, me, etc.
Select the Slice tool and draw around each box – this works pretty much the same as the Marquee Tool.
Next select the Slice Select Tool from the flyout menu, right click on the first slice and select Edit Slice Options.
From this dialogue we want to adjust the name and the url to reflect the name of the link and the page it wishes to go to. In this example I have named the slice home and the url to index.html, this could be anything for example http://www.google.com
when you have completed this for all of your buttons we select the save for web option in the file menu. (File>Save For Web>)
In the Save for web dialogue select the Save button, from Save as type drop down menu choose html and images, give the file a name and click Save.
Navigate to the saved file and double click the webpage file that has been created for you – this will show you what you have created. If you want to use the code within a web page simply open the webpage up in notepad and copy everything between and including the <table> </table> tags.
Of course this only a simple example of what can be done.
- How to Create a Cinematic Look in Photoshop
- How to Create Snow in Photoshop
- Adding Snow to Winter Photos in Photoshop
- Perfect Eyes Photoshop and Lightroom Plugin
- The ‘Gotcha’ of Creating A New Document in Photoshop 2017
- Making a Time-lapse with Photoshop
- Combining Shapes to Make Bespoke Text in Photoshop
- How to Create a Multi-Page PDF in Photoshop
- How to Create a Photoshop Document Template
- Enhancing Autumn Colours with Photoshop