Photoshop 到 CSS

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

想要改进这个问题吗？通过编辑这篇文章来更新问题，使其仅关注一个问题。

11 年前已关闭。

Answer 1

有很多教程会教你将 Photoshop 切片为 html 和 html。 css

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/

但回答你的问题。这完全取决于您设计的按钮。但对于标准wone，您必须将按钮的背景复制到新文档中并另存为png或jpg（确保切片可以重复的1或3px图像）

，然后使用一些css3魔法您可以设置样式您的按钮并确保它适合您的按钮的内容。

例如：

input[type="text"]
{
   /*add rounded corners*/
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   background:#000 url('../images/button-background.jpg') repeat-x top left;
   paddng:3px 6px;
   margin:2px 0;
}

背景的 url 应指向图像，并且当按钮太大时最好添加匹配的背景颜色

Answer 2

你想要做的事情有很多很多不同的解决方案。这里只是几个：

1. 您可以仅使用 css3 创建按钮

警告：此解决方案将无法在没有 javascript 插件

html

<a href="http:/my.url.com/" class="button">Hello World</a>

css 的

.button {
    border:solid 2px white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:5px 5px 5px black;
    box-shadow:5px 5px 5px black;
    padding:20px;
    background:lightgray;
    color:darkgray;
}

旧版浏览器上工作2. 您可以使用 2 个图像 photoshop 创建按钮

：

create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
   ___________________________
  /
  |  button1.png        ...
  \___________________________

now create the right side of the button.
make sure it's very short, like below:
                    _____
                         \
   ...   button2.png     |
                    _____/

html

<a href="http:/my.url.com/" class="button">
    <span>Hello World</span>
</a>

css

.button {
    background: url(path/to/button1.png);
}

.button span{
    height: (height-of-button2.png);
    line-height: (height-of-button2.png);
    padding: 0 20px;
    background: url(path/to/button2.png) no-repeat right top;
}

这些只是几个变化。

编辑：抱歉。上面的代码是错误的。我刚刚修好了。

Answer 3

不，无法直接从 Photoshop Elements 转换为可缩放的 HTML 和 CSS 版本。您需要将整个按钮导出为一个大图像（并为每个按钮使用单独的图像），或者使用 CSS 自行构建按钮。

Answer 4

sexybuttons - http://www.oscaralexander.com /tutorials/how-to-make-sexy-buttons-with-css.html 可以在 Photoshop 中创建一个按钮，一旦你用 CSS 构建了它，它就会根据你放入的任何文本调整其宽度，至于身高……不确定。

Answer 5

使用 Photoshop 来创建代码并不是一个好主意。它创建了看起来很糟糕的代码。最好只是切片并命名切片，将它们保存到图像中，然后手动编写代码。不幸的是，这是一个非常手动的过程，而弥合设计和代码之间的差距并不是人类做得很好的事情！