Original Article at Photo Sprites Menu Tutorial.Photo CSS Sprites for WordPress — Free PSD This Tutorial will show you step by step how to build an attractive menu using sprites for your WordPress Photo website. I have used this feature on the below demo site: The menu is placed in the header.php of the WordPress theme (here its Semiomantics XO) in replacement of the navigation. 1. Create the Image file in Photoshop The image file consists roughly of a Filmstrip serving as mask and then the images which are inserted into the film strip. In the normal position, the images are dimmed by a black fill layer at about 75% opacity. The final image looks as follows: Download the PSD File Download my PSD file from HERE. Open the PSD file in Photoshop and inspect it When you open the file in Photoshop, you will find 3 folders in the layer stack: The bottom folder contains the lower film-strip, the next folder concerns the upper film-strip and on top you find the Semiomantics XO Photo Publishing ad which I kick in as a bonus. To start, just make the “ad” folder invisible by clicking on the eye icon placed to the left of the “ad” folder. [...]
Copyright © Yorgo Nestoridis - Original Article at Photo Sprites Menu Tutorial.
Related posts:Evo 2 Home Page Tutorial
Evo2 Gallery Tutorial
Simple Sprites Menu
Thesis Tutorial Header Banner Rotator
Apple Touch Icon Tutorial
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/wordpress-yorgo-nestoridis-development/semiomantics-shop-forwordpress/.Customization : Icons and Graphics Theme and skin specific graphics are contained in the two respective image folders, one in the theme root and the other in the skins folder. The Home Icon The Home icon, visible in the first tab of the navigation bar is of particular interest as the image can be customized for branding purposes. Apple puts its logo there … The image is called ‘home.png’ and measures 21 x 34 pixels containing two home icons of different coloration to achieve the hover effect. You may download a free PSD file containing the original image and some variations; click on the image below. Customize the Home Icon To change the design all together,just create anew image in Photoshop. Use a 21 x 34 pixels transparent background Place your Logo into the top half Duplicate the logo layer and position it in the lower half. Select the lower icon and tint it darker (for the hover effect). Save as transparent .png and replace home.png in your skin image folder Other Sample: Semiomantics eShop Theme for WordPress This ismage measures 30 x 60 pixels and requires and adjustment of [...]
Related posts:Semiomantics eShop for WordPress
WordPress Shop Version 3 by Semiomantics
Transparent WordPress Semiomantics XO
Mobile WordPress and Shop
Best WP Shop Custom Design
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/web-design/simple-sprites-menu/.How to build a fading Navigation with Sprites To build a navigation bar using sprites we need an image (menu design), some CSS code to style the menu area and some HTML code to link the menu to target. Finally we drive the feature with [...]Related posts:Simple Shopping Cart for your BlogWeb Design BackgroundsWeb Design Workshop 16 – Scroll over BackgroundTransparent WordPress Semiomantics XOTransparent WordPress Theme Design
August 17, 2011
0