Solved

I need to create another button.

Posted on 2009-07-14
19
186 Views
Last Modified: 2012-05-07
I bought some buttons and I need a LOGOUT button like my LOGIN
Can someone help me with this?

log-in.gif
0
Comment
Question by:mathieu_cupryk
  • 10
  • 7
  • 2
19 Comments
 
LVL 10

Assisted Solution

by:racmail2001
racmail2001 earned 332 total points
ID: 24856920
do you have the fonts and the psd for the button?

then you sould edit the text and replace it with what you need

if what you have it's only a picture it's a litle bit more complicated - but not impossible

the button usually it's composed from 3 parts
1. the left part (a left border  top and bottom left corners and a background color)
2. the middle part (a top and bottom border and a background color)
3. the right part (a right border  top and bottom left corners and a background color)

so what you need to do is to separate this parts in different layers

the most important is the middle part where you text will be
so you can get a 2-3 pixel selection where is no text from the middle part and transform it (change the width to cover all the old text)

now you have a blank button and you can put the new text over it

0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24857197
Just grab one of the gradient styles here:
http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles
http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download
http://www.dezinerfolio.com/2008/11/19/220-amazing-free-photoshop-layer-styles

Now you just have to create a rounded rectangle or with a rectangular marquee make a square and then go to Select > Modify > Smooth > for example radius 3px. And then fill it with white. And apply one of those layer styles or gradients.
And then in the CSS you can use the sliding doors technique in the CSS to use just 2 images, you can slice those up in Photoshop left part is 3px and right part is 197px. Below an example snippet that i have created for the use in Sharepoint
Good luck

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#workflowbutton {
	font:bold 11px Tahoma, Arial, Helvetica;
	margin:0px;
	padding:0px;
	display: block;
	width:100%;
}
 
#workflowbutton ul {
	float:left;
	width:480px;
	line-height:32px;
	list-style:none;
	margin:0;
	padding:0 15px 0 0px;
}
 
#workflowbutton li {
	display:inline;
	padding:0;
}
 
#workflowbutton li img {
	padding-right:5px;
	vertical-align:middle;
	border:none;
}
 
#workflowbutton a {
	color:#436ed5; /* need because it will use default link color */
	float:left;
	padding:0 3px 0 3px; /* left 3 px because of left.png image */
	text-decoration:none;
	background: url(images/left.png) no-repeat left center;
}
 
#workflowbutton a span {
	display:block;
	float:none;
	padding:0 10px 0 7px;
	background:url(images/right.png) no-repeat right center;
}
 
#workflowbutton a:hover {
	background: url(images/left-hover.png) no-repeat left center;
}
 
#workflowbutton a:hover span {
	background:url(images/right-hover.png) no-repeat right center;
	color:#1542ad;
}
</style>
</head>
<body>
<div id="workflowbutton">
  <ul>
    <li><a href="#" title="Cancelled"><span><img src="images/icons/cancelled.png" width="16" height="16">Cancelled</span></a> </li>
    <li><a href="#" title="Completed"><span><img src="images/icons/completed.png" width="16" height="16">Completed</span></a></li>
    <li><a href="#" title="Expired"><span><img src="images/icons/expired.png" width="16" height="16">Expired</span></a></li>
    <li><a href="#" title="Expiring"><span><img src="images/icons/expiring.png" width="16" height="16">Expiring</span></a></li>
    <li><a href="#" title="Fualting"><span><img src="images/icons/faulting.png" width="16" height="16">Faulting</span></a></li>
    <li><a href="#" title="Has New Events"><span><img src="images/icons/hasnewevents.png" width="16" height="16">Has New Events</span></a></li>
    <li><a href="#" title="Locked"><span><img src="images/icons/locked.png" width="16" height="16">Locked</span></a></li>
    <li><a href="#" title="Not Started"><span><img src="images/icons/notstarted.png" width="16" height="16">Not Started</span></a></li>
    <li><a href="#" title="Running"><span><img src="images/icons/running.png" width="16" height="16">Running</span></a></li>
    <li><a href="#" title="Suspended"><span><img src="images/icons/suspended.png" width="16" height="16">Suspended</span></a></li>
    <li><a href="#" title="Terminated"><span><img src="images/icons/terminated.png" width="16" height="16">Terminated</span></a></li>
    <li><a href="#" title="Edit Workflow"><span><img src="images/icons/edit.png" width="16" height="16">Edit Workflow</span></a></li>
    <li><a href="#" title="Start Workflow"><span><img src="images/icons/start.png" width="16" height="16">Start Workflow</span></a></li>
    <li><a href="#" title="Delete Workflow"><span><img src="images/icons/delete.png" width="16" height="16">Delete Workflow</span></a></li>
    <li><a href="#" title="View Workflow"><span><img src="images/icons/workflow.png" width="16" height="16">View Workflow</span></a></li>
    <li><a href="#"title="Add Workflow"><span><img src="images/icons/add.png" width="16" height="16">Add Workflow</span></a></li>
  </ul>
</div>
</body>
</html>

Open in new window

images.zip
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24857231
This is how your image would be sliced:
buttonslice.jpg
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 

Author Comment

by:mathieu_cupryk
ID: 24859827
I like the way u set this up. It is clean let me try it out tonight. I am just diappointed that I purchased buttons and now I have to create them
0
 

Author Comment

by:mathieu_cupryk
ID: 24869624
0
 

Author Comment

by:mathieu_cupryk
ID: 24876241
I tried it out I get the following image.

Something is wrong.
workflow.png
0
 

Author Comment

by:mathieu_cupryk
ID: 24876317
Something is missing Is this what it should look like.

somethingmissing.png
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24876416
Do you have the HTML and CSS for your website so i can check if there's an error.
0
 

Author Comment

by:mathieu_cupryk
ID: 24883478
Something seems wrong with the right.png image?
PlEASE CAN U CHECK TO SEE IF IT IS CORRECT.

THANKS.
ALSO SHOULDIT BE A CLASS OR ID?

#workflowbutton li img {
      padding-right:5px;
      vertical-align:middle;
      border:none;
}
 
#workflowbutton a {
      color:#436ed5; /* need because it will use default link color */
      float:left;
      padding:0 3px 0 3px; /* left 3 px because of left.png image */
      text-decoration:none;
      background: url(../../Images/Buttons/left.png) no-repeat left center;
}
 
#workflowbutton a span {
      display:block;
      float:none;
      padding:0 10px 0 7px;
      background:url(.../../Images/Buttons/right.png) no-repeat right center;
}
 
#workflowbutton a:hover {
      background: url(../../Images/Buttons/left-hover.png) no-repeat left center;
}
 
#workflowbutton a:hover span {
      background: url(../../Images/Buttons/right-hover.png) no-repeat right center;
      color:#1542ad;
}


In firefox:
http://localhost:50410/App_Themes/OmegaLove/StyleButton.css
 
#workflowbutton a span (line 76)
 
{
 
display: block;
 
float: none;
 
padding-top: 0pt;
 
padding-right: 10px;
 
padding-bottom: 0pt;
 
padding-left: 7px;
 
background-color: transparent;
 
background-image: url(.../../Images/Buttons/right.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: right center;
 
}
 
#workflowbutton a:hover span (line 87)
 
{
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/right-hover.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: right center;
 
color: #1542ad;
 
}
---------------------------------------------------------------------------
http://localhost:50410/App_Themes/OmegaLove/StyleBase.css
 
a (line 33)
 
{
 
color: #3a3a3a;
 
text-decoration: none;
 
}
 
a:hover (line 38)
 
{
 
color: #ff9933;
 
text-decoration: none;
 
}
http://localhost:50410/App_Themes/OmegaLove/StyleSheet.css
 
a:link (line 166)
 
{
 
text-decoration: none;
 
}
 
a:hover (line 176)
 
{
 
text-decoration: underline;
 
}
http://localhost:50410/App_Themes/OmegaLove/StyleButton.css
 
#workflowbutton a (line 68)
 
{
 
color: #436ed5;
 
float: left;
 
padding-top: 0pt;
 
padding-right: 3px;
 
padding-bottom: 0pt;
 
padding-left: 3px;
 
text-decoration: none;
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/left.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: left center;
 
}
 
#workflowbutton a:hover (line 83)
 
{
 
background-color: transparent;
 
background-image: url(../../Images/Buttons/left-hover.png);
 
background-repeat: no-repeat;
 
background-attachment: scroll;
 
background-position: left center;
 
}

Open in new window

0
 

Author Comment

by:mathieu_cupryk
ID: 24929205
Can u pleasehelp me build the logout button
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24941585
Don't you have the PSD file of that login button or did you only bought the GIF file.
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 168 total points
ID: 24941655
Ok try this one i build the login button without an unordered list, just with a div class. You can download my PSD used for this here: http://www.mediafire.com/?sharekey=5e9a6e30add98fece7ba8e3c6e11ce2050629b6037402a305be6ba49b5870170.
Good luck

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login button</title>
<style type="text/css">
.button {
	font:bold 12px "Segoe UI", Tahoma, Arial, Helvetica;
	width:100%;
	line-height:32px;
	list-style:none;
	margin:0;
	display:block;
	padding:0 15px 0 0px;
}
.button a span {
}
.button a {
	color:#fff; /* need because it will use default link color */
	float:left;
	padding:0 8px 0 8px;
	text-decoration:none;
	background: url(images/left.png) no-repeat left center;
}
.button a span {
	display:block;
	float:none;
	background:url(images/right.png) no-repeat right center;
	padding-top: 0;
	padding-right:11px;
	padding-bottom: 0;
	padding-left: 4px;
}
.button a:hover {
	background: url(images/left-hover.png) no-repeat left center;
}
.button a:hover span {
	background:url(images/right-hover.png) no-repeat right center;
	color:#fff;
}
</style>
</head>
<body>
<div class="button"><a href="#" title="Login"><span>This is your login button</span></a></div>
<div class="button"><a href="#" title="Login"><span>This one too</span></a></div>
</body>
</html>

Open in new window

images.zip
0
 

Author Comment

by:mathieu_cupryk
ID: 24942328
I only bought the gifs. I will try the other method. Thank you for understanding. It is tough to be alone and programming.
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24942551
Did you tried my above code i have also added a link for you with the Photoshop PSD file? If my respond takes a little longer, i'm on a holiday :)
0
 

Author Comment

by:mathieu_cupryk
ID: 24949274
i was sick all week. I am working on it today. sorry for the delay
0
 

Author Comment

by:mathieu_cupryk
ID: 25020176
Hi there, I have tried everything out. I looked at everything you sent me. I appreciate it.
I need to create a logout button with the arrow similar to th login.

log-in.gif
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 25020709
Ok i will create a example for you again but usually in need that PSD file for that button i will try to recreate it. Because using ours will be crap :) when copy/slicen and pasting.
0
 

Author Comment

by:mathieu_cupryk
ID: 25023073
I join mediafire. This is great. I will be waiting for the button. I think the attributes are Arial 13pt.
Bold  Strong for the text.
Thanks.
0
 
LVL 10

Assisted Solution

by:racmail2001
racmail2001 earned 332 total points
ID: 25023222
it's ok this button?
log-out.gif
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
best online free website 29 132
Merging two PDF files from different folders 5 58
Animating text  - electrons orbit around letter M 12 87
adobe premier render 10 58
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to restore old photos in Photoshop (an introduction to the Clone tool) Zoom into a damaged area: Click on the "Stamp" icon to use the Clone tool. Hold the Alt key and click to select a region. Click again, and…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question