Simple Photoshop menu effect
- Started
- Last post
- 5 Responses
- iamjustoneman
Hi all,
Was just wondering how I go about creating an inverted effect as seen on the active state of this menu:
http://simplestation.com/portfol…
Thanks
- schjetne0
Where?
- ninjasavant0
Do you want to draw a picture of it or actually create the effect on a website?
- ukit0
You have two friends, bevel and emboss
- ninjasavant0
If you want to draw a picture of it just create a shape layer with a gradient overlay effect and a stroke with a gradient. Then place your text. Then create a rounded rectangle shape layer beneath the text with layer effects for color overlay, inner shadow, and bevel/emboss direction down. Picture made.
If you're actually trying to create that effect in a web site (Photoshop doesn't build web sites) your answer is in the head tag from the site itself:
<script src="/scripts/mootools-1.2.1-core-nc.js" type="text/javascript"></script>
<script src="/scripts/header.js" type="text/javascript"></script>
<meta name="Description" content="Latest samples of Simple Station's portfolio including web design, user experience, and web application development." />
<link href="/styles/portfolio.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/scripts/slider.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var clientScroller = new Slider({
container: 'clients',
pageSelector: 'div.client',
horizontal: true,
nextBtn: 'next-client',
prevBtn: null});
var hash = window.location.hash;
if (hash != '') {
hash = hash.split('#')[1];
var elem = $(hash + '-page');
if (elem) { clientScroller.gotoSliderPage(el... }
}
});
</script>
- ESKEMA0
That one seems done pixel by pixel... otherwise you can achieve the "inverted" look in layer effects with bevel / emboss