Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentGraphic Design2D Graphics (Photoshop, Illustrator, etc) right
  Reply to this topic Start new topic
left right
XyberForce
post Jan 14 2009, 01:28 AM
Post #1


Super Duper Ninja
*****

Group: Members
Posts: 453
Joined: 20-September 07
From: Houston, TX
Member No.: 290



http://hnsm.deviantart.com/art/Private-Page-108496300

Uhh, how do I replicate these btns?
Go to the top of the page 
 
  + Quote Post
Cmain
post Jan 14 2009, 05:32 AM
Post #2


Outrageously Uber Ninja
*******

Group: Moderators
Posts: 1,102
Joined: 2-June 07
From: United States
Member No.: 14



Start by making a 10px radius rounded rectangle. Then go to Blending Options -> Stroke. Add a gradient stroke of white to black and set mode to Overlay or Soft Light. Might want to play with opacity a bit. Then use dodge tool or large feathered brush to add light sections. Text is something like Arial 10px with no aa.
Go to the top of the page 
 
  + Quote Post
MrTouz
post Jan 17 2009, 12:07 AM
Post #3


Outrageously Uber Ninja
*******

Group: Members
Posts: 1,196
Joined: 19-September 07
Member No.: 234



Very bad in explanation but my try (did not open photoshopn PC sucks so hard that its gonna take 5 minutes to open and its gonna cut my music and bug the browser) so i will try without PS opened tongue.gif

I say :

- rounded rectangle (for radius, as CMAIN probably 10 or 15px)
- gradient color at 80° start by white - primary color (black or violet as in the pic) - white (make sure the white is very small so there is just a lighting effect to it.
- inner shadow (change the angle so its on top, around 3px or 4) put the color white to the shadow, play around with the opacity.

If you have PS... it can be done just by playing around :/ nothing really hard :/
Go to the top of the page 
 
  + Quote Post
iamandy
post Jan 17 2009, 12:00 PM
Post #4


Marvellous Ninja
Group Icon

Group: Community Helper
Posts: 533
Joined: 30-May 07
From: England
Member No.: 13



that looks more likeBevel and Emboss, not inner shadow and there is also a very faint vertical gradient, of a darker colour along with the white bits set to softlight/screen in the top left corner and bottom right.

EDIT:

i'd say the white bits are actually rounded soft brush
Go to the top of the page 
 
  + Quote Post
MrTouz
post Jan 17 2009, 01:42 PM
Post #5


Outrageously Uber Ninja
*******

Group: Members
Posts: 1,196
Joined: 19-September 07
Member No.: 234



Honestly can't they be anything ?

I mean 2 different tools can give the EXACT same effect right ? gradients or brush, or shadow or bevel...

The only way to find out is to ask the dude who made it. tongue.gif

(but i have to agree with the bevel)
Go to the top of the page 
 
  + Quote Post
XyberForce
post Jan 18 2009, 07:18 PM
Post #6


Super Duper Ninja
*****

Group: Members
Posts: 453
Joined: 20-September 07
From: Houston, TX
Member No.: 290



Thanks guys. So I'm guessing that's same way this was made, with the softlight effect?
Go to the top of the page 
 
  + Quote Post
MrTouz
post Jan 19 2009, 03:10 PM
Post #7


Outrageously Uber Ninja
*******

Group: Members
Posts: 1,196
Joined: 19-September 07
Member No.: 234



I guess... with a lots of lots of tweaking. But yea... you can play around for a while with photoshop ! im sure you'll find this effect somewhere !
Go to the top of the page 
 
  + Quote Post
XyberForce
post Jan 21 2009, 07:26 AM
Post #8


Super Duper Ninja
*****

Group: Members
Posts: 453
Joined: 20-September 07
From: Houston, TX
Member No.: 290



QUOTE(MrTouz @ Jan 19 2009, 09:10 AM) *
I guess... with a lots of lots of tweaking. But yea... you can play around for a while with photoshop ! im sure you'll find this effect somewhere !


And I did ^.^

Thanks so much guys.
Go to the top of the page 
 
  + Quote Post
adam007
post Aug 4 2011, 11:18 AM
Post #9


Ninja
***

Group: Members
Posts: 104
Joined: 27-June 11
Member No.: 196,019



use photoshop for buttons like this.
Go to the top of the page 
 
  + Quote Post
britney12
post Aug 13 2011, 10:38 AM
Post #10


Newbie
*

Group: Members
Posts: 2
Joined: 13-August 11
Member No.: 203,454



photoshop is a effective tool to design a buttons.
Go to the top of the page 
 
  + Quote Post
AlejandraHMolin
post Aug 29 2011, 05:07 AM
Post #11


Newbie
*

Group: Members
Posts: 19
Joined: 26-August 11
Member No.: 205,826



there are available codes when google the codes for buttons..
Go to the top of the page 
 
  + Quote Post
mathewson
post Sep 3 2011, 09:40 AM
Post #12


Newbie
*

Group: Members
Posts: 8
Joined: 3-September 11
Member No.: 206,995



ya even i was wondering how these button things work
Go to the top of the page 
 
  + Quote Post
 Reply to this topic Start new topic
left right
0 Members:
left right
 


Lo-Fi Version Time is now: 24th May 2013 - 05:00 AM