About Me

My photo
Extending one hand to help someone has more value rather than joining two hands for prayer

Archives

How to make menu for the blog in adobe photoshop

*open the button for the menu in adobe photoshop
*If u dont have button u can download it from the internet, if further not then read the next post oin which i teach how to make buttons for the website
*after opening the button ur visualisation is look like as shown in fig 211





*Go to file
*click file<<new
*A window is open as shown in fig 212
*choose custom
*Set the height and width of the menu bar
*set the background colour as well




*A new window is open as shown in fig 213 pointed by arrow
*this is the size of ur menu bar
*select the button with the help of magnetic lasso tool as pointed by arrow







*Press ctrl and drag drop the button on the menu by by pressing the left click of ur mouse
*As u see the size of the button is large on the menu bar
*Press ctrl+t then ur button is selected as pointed in arrow in fig 214
*Adjust the button in menu bar by dragging the rectangle with the help of mouse




*Now ur button is fit on the menu bar as shown in fig 215
*Adjust the lenth of the button according to how many buttons u want to place in ur menu bar
*As i adjusted the length of the button so that 5 buttons can fit on my menu bar








 *Press ctrl+alt and drag the button on the menu
*By doing this a duplicate button is made after that button
*Repeat this process to obtain 5 buttons on the menu bar as shown in fig 216


 






*write the text on the buttons according to ur need as shown in fig 217




*select the slice tool as pointed in fig 218
*Divide menu into five slices as shown in fig
*These slices are actually used to create links such that when u press these buttons different pages are open







*After using slices tool ur menu bar is look like as shown in fig 219







*Select the home button slice with the help of slice selector tool
*U can find this tool by clicking the small trianle in the bottom of slice tool
*After selecting home slice click the slice options as shown on the top of the menu of adobe photoshop
*Type the full url of the page which u want to open by clicking this button
*Type a text messege(optional) which ur browser dispaly when u place mouse button on the menu bar
*press ok








*Now select page1 slice with the help of slice selector tool
*Type url of that page which u want to open by clicking that button
*repeat these steps in all the five buttons




*Go to file
*click save for web
*Now a window is open as shown in fig 222
*U can take a preview of ur menu bar with the help of previes option on the bottom
*Now press save





*Select the path to save it
*As i save in destop
*After saving u will c that an new folder of images is made on ur destop






*Now open ur web page on the destop and it will look like in fig 224




*Now the important thing is note here that this web page is only made to open from ur computer. If u want to fed this menu into ut website or ur blog then u have to take some changes in the html code of this web page
*now in this web page
*click view
*click source code
*A source code window will open as shown in fig 225
*Copy this source code in some notepad file





*Now open ur image folder, u will see that thier are five images shown here, these are those images which u select with the help of slice tool. Names of these images are also shown in source code along with extension like .jpg,.gif according to image
*Now u have to publish these images on the web server






*If u are using blog from blogspot.com then go to picasaweb viewer and upload ur photos there. Now u have to save the web address of each photo.
*now open that notepad file where u save the code
*look at the lines pointed in fig 227
*these are the address of the images in ur computer
*delete these code which are between double braces and place the address of that image on it
*repeat this step bec u have 5 web address of the five photos and u have to replace it with the appropiate image code







*now if u want to put this menu in blloger template
then select the code from <table> to </table> as shown in fig 228






*go to costomize ur template
*go to layout
*go edit HTML
*paste this code after the line <body>
*save it and enjoy ur own menu just as i made my own menu as shown in fig 229




































2 comments:

Unknown said...

Excellent
Freelance graphic designing in Chennai

RD said...

Download Free Adobe Premiere Pro CC Nov-2021
Download Now

Post a Comment