Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 161
  • Last Modified:

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...
0
Eaddy Barnes
Asked:
Eaddy Barnes
  • 8
  • 6
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now