Creating a Button in Photoshop 7

Hello,

I am trying to create a button its size W143 H25, now an example of the button I would like it to look like is something like this http://www.tutorialized.com/tutorial/Web-Button-Plastic-Style/12364 . Now my problem is that in most of these tutorials that want u to create a new document and start your button/image from scratch, but I already have an image made. A gif file and thats what i would like to make into my button as to look of that image would just blend just as I would want it do on the finished site...
LVL 11
Eaddy BarnesITAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Wooky JackCommented:
You should be able to creat the button in Image Ready easily.  Do you have that program as well?
0
Wooky JackCommented:
From my knowledge your button will need certain states unless you just want a plain button with no clicking or rollover effects.  What are you wanting as far as that?
0
Eaddy BarnesITAuthor Commented:
I have image ready yes and i don`t want it to necessarily be a rollover, just the an image that I specify thats made into an example of the button in that link...
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Wooky JackCommented:
Can you take the PSD that is offered on the link and use what you want from their button as the layers are available to do whatever you want with them and just integrate their stuff onto your gif the is already created?

Suggestion make sure you make a psd of your gif after you modify it because if you flatten the images with no psd backup you can't edit anything later!
0
Eaddy BarnesITAuthor Commented:
LOL, well if i knew how to modify their tutorial I wouldn`t be asking here now would I?
0
Wooky JackCommented:
Ah, my bad.  Let me download it and make a walkthrough for you in a few minutes ;)
0
Wooky JackCommented:
What specific features of the button are you wanting to implement on your button?
0
Eaddy BarnesITAuthor Commented:
let me try and explain, the gif file that I have was an image that I chopped/sliced from a bigger picture of a something. The original file was W143 X H500 .. I sliced the W143 X H500 image into 20 slices.. each W142 X H25...
Now lets call The original Image (image1) and the image i want turned into a button (image2)

I sliced up the original image to put in the cells like the following but the slices I would like to make buttons of (keeping the look of the image) so when I piece it all back together I get back image1, know what I mean?

TABLE WIDTH=143 BORDER=0 CELLPADDING=0 CELLSPACING=0>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_01.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_02.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_03.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_04.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_05.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>
      <TR>
            <TD>
                  <IMG SRC="images/sidebar_06.jpg" WIDTH=143 HEIGHT=25 ALT=""></TD>
      </TR>

and so on and so on till i have 20 images in the cells in the table ...
0
Eaddy BarnesITAuthor Commented:
ok
0
Wooky JackCommented:
I get ya now.

What I'm a little hazy on is what image does each sidebar have?  is it a text image or a physical image thatt is part of a larger image?

with each sidebar that you've sliced up, what parts, features, effects, of that psd are you wanting to integrate to your images?

I understand that you have your own images, you're referrencing the one from the site, but I don't know if you're not figuring out how to implement those effects to your own or something else.  Can you clarify that up?
0
Eaddy BarnesITAuthor Commented:
the sidebar is just a table with cells and theirs like 20 cells that can hold 20 images 143 x 25, these images were cut from an image 143 x 500, I want when i put these sliced images into the cells they look as if their 1 big 143 x 500 image and with each of the images bein a button ..Im looking to integrate the shadow effect..

I don`t know how to integrate it, i know what i want but just don`t know how to get it done..
0
Wooky JackCommented:
open up one of your images you want to integrate the shadow effect with.

if necessary rename the "background" or whatever the layer's name is if it's currently locked by double clicking it to reopen it.

with the layer now open and selected in the layers panel move your cursor down to the bottom of the layers panel and click on the black circle with the "F" in it (add layer style)

go to Blending Options

From there you can add an inner shadow or drop shadow, whatever you like better and make sure the image you're changing is visible so you can see the effect when applying it.

Also try Bevel and emboss (it takes some playing around, but you'll find an effect you like)

ex) if you selected drop shadow make sure to uncheck "use global light" and then adjust the angle of the shadow with the radial dial.

once you're done click ok.

if you need to edit it later all you have to do is click on the layer that you want to edit the effect on and click the black circle with the "F" on it and you should be taken to blending options again.

Let me know if there are other effects you've noticed on that button i'm sure I can help you out.

Also, I noticed that that button from that site has gradients applied to it to give it a hazy kinda blend from gray to silverish effect.  I can show you that as well if you like.

Let me know I'm happy to help you :)

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Wooky JackCommented:
I hope that helped you out!  Thanks for the points.
0
Eaddy BarnesITAuthor Commented:
yeah it helped, with what u told me and from what i read i was able to modify a few things.. your response made a few things clearer..
thx
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Creative Suite CS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.