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.
- Tippy’s Quiz Night: Photoshop Selections
- Introducing Tippy’s Quiz Night!
- What’s What? Live! Discovering Passion, Resilience, and Nordic Workshops with Special Guest Dave Williams
- Social Media Image Sizing with Adobe Express
- From Stanford to Lynda, then LinkedIn Learning and Adobe. Jan Kabili’s Journey
- 3 Photoshop Techniques for Effortless Social Media Sizing
- Unveiling the Multifaceted World of Technology and Creativity with David McClelland
- New Things and Reminiscing. What’s What? Live! with Special Guest Dave Cross
- Unlocking Creativity: Exploring Adobe Express with Jordan Dené Ellis
- Exploring Comics and Mental Health: A Livestream Chat with Lucy Sullivan