photoshop使用技巧_如何使用CSSHat，LESHsat和PNGHat编写Photoshop布局的代码

最新推荐文章于 2024-05-17 04:58:53 发布

daique1908

最新推荐文章于 2024-05-17 04:58:53 发布

阅读量300

点赞数

文章标签： python css java html javascript ViewUI

photoshop使用技巧

在上一教程中，我们介绍了如何在Photoshop中准备设计，准备转换为纯CSS3和Base64代码。在本教程中，我们将借助Source制造的Photoshop插件CSSHat和PNGHat以及FontAwesome和CSS预处理器LESS来处理实际的代码生成。

让我们直接潜入！

创建文件和文件夹结构

首先，您需要在计算机上创建一个新文件夹来容纳您的静态网站。在这种情况下，我要命名文件夹codedup 。

在该文件夹中，创建一个名为index.html的新文件，并在其中添加以下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Photoshop to Pure Code with CSSHat and PNGHat</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

在这里，我们将为网站设置基本HTML Shell，并在Roboto中进行链接，在PSD中使用的Google字体以及CSS样式表。

接下来，在您的codedup文件夹中创建两个子文件夹，一个名为css ，另一个名为LESS 。在LESS文件夹中，创建一个名为style.less的文件。您网站的所有样式都将写入此文件，然后编译为css> style.css 。

注意：LESS文件的结构

在我们处理您的style.less文件时，应按以下顺序组织其代码：

进口货
变数
混合蛋白
款式

我建议在style.less文件中每个部分的顶部添加注释，以帮助您跟踪应放置不同类型的代码的位置。

如果愿意，您可以创建单独的文件（部分）来容纳每种类型的代码，并将每种类型的代码导入到主LESS文件中。但是，为了使事情简单，我们将仅使用一个文件。

使用Prepros设置自动编译

Prepros是一个为Web设计人员和开发人员处理各种前端任务的应用程序。它将编译我们的LESS，每当对我们的文件进行更改时，都会自动刷新浏览器，如果需要，甚至可以同步多个设备。下载并安装Prepros，您可以从以下网址免费获得它： http ://alphapixels.com/prepros/

运行该应用程序，然后将codedup文件夹拖到主界面上以将其添加为新项目。

Prepros将自动检测项目文件夹中的style.less文件，默认情况下将激活“自动编译”。每当您保存对style.less的更改时， Prepros都会检测到该更改，然后编译为css> style.css 。

您也可以在界面中单击style.less以查看其他可用设置，例如在编译过程中压缩CSS的选项。

合并LESSHat和Normalize.less

现在继续抢文件LESSHat ，一个mixin库，在精美的关系与CSSHat，以及Normalize.less ，写得不那么友好语法的版本“Normalize.css”的。

下载这两个文件并将它们放入您的项目后，返回Prepros，您会看到它已自动检测到这两个文件。我们将两者都导入到我们的main style.less中 ，我们不希望它们被编译成单独CSS文件，因此请单击每个文件并取消选中“自动编译”。

现在，在首选的代码编辑器中打开您的style.less文件，并将这两行添加到顶部：

@import "lesshat.less";
@import "normalize.less";

保存文件，Prepros将自动为您编译文件，之后，您应该在屏幕的右下角看到以下弹出窗口：

现在，您还应该在项目的css文件夹中看到文件style.css 。

合并FontAwesome

现在，我们将通过添加字体文件本身以及预先创建的LESS库“ FontAwesome.less”将FontAwesome合并到项目中，这使得在设计中放置FontAwesome图标变得异常容易。我们要做的就是导入文件，然后FontAwesome类可以立即访问。

在后面的教程中，当我们添加“大向下箭头”元素时，您将看到它在实践中如何工作。

首先在您的LESS文件夹中创建一个名为font-awesome的子文件夹。 FontAwesome的库中有很多文件，因此我们将其保存在此处以使我们的书架井井有条

从以下位置以zip格式下载FontAwesome： https ： //github.com/FortAwesome/Font-Awesome

解压缩该文件夹并从其less文件夹中复制所有文件，然后将其粘贴到您刚刚在项目中创建的font-awesom e文件夹。然后从解压缩的FontAwesome下载中复制整个字体文件夹，并将其作为子文件夹粘贴到您的项目中。

您的完整项目文件和文件夹结构现在应如下所示：

Prepros将再次检测到新的LESS文件，因此请取消选中现在出现在界面中的任何文件上的“自动编译”。

将以下行添加到您的style.less文件中，在之前添加的行下方：

@import "font-awesome/font-awesome.less";

现在，您的项目已具有所需的所有LESS导入和字体文件，并且已激活自动编译，因此我们准备开始将PSD转换为代码。

将背景图像合并为Base64

在上一个教程中，由于其尺寸小且颜色数量少，我们选择了名为“缎纹编织”的图案在我们的背景上平铺。现在，我们将使用PNGHat插件将其转换为Base64代码字符串。

在Photoshop中打开PSD。我们知道图案的尺寸是24像素宽x 12像素高，因此请继续使用选取框在设计上的任何位置创建该尺寸的选择。

现在，确保已选择要应用图案的背景层，打开PNGHat窗口。您所要做的就是单击窗口顶部行中的“ Base 64”选项，然后单击“导出选定的图层”。

您将看到一个对话框，要求您确认是否要“按选择裁剪图像？”。单击“ 是” ，您将在PNGHat窗口的底部空间中看到Base64字符串输出。单击复制按钮。

回到您的style.less文件，并将刚从PNGHat复制的代码粘贴到“变量”部分。从粘贴的代码中删除所有内容，但url(data.......);除外url(data.......); 然后在该行的开头添加@satinweave: 您应该最终得到：

@satinweave: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC/xhBQAAAAlQTFRF8vLy7+/v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8+0axlg5wlFW/FGyEdTUpeESKOqXBN8+cB4yUS37/ediwAAAAASUVORK5CYII=);

现在，我们准备将易于使用的新@satinweave变量放入样式中，以使其出现在我们的设计中。在此讨论的同时，我们还将为站点范围的box-sizing和链接设置添加一些基本规则。

将以下代码添加到styles.less文件的“ Styles”部分：

* {
    .box-sizing(border-box);
}
body {
	background-image: @satinweave;
	overflow-x: hidden;
}
a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

保存您的文件，以便Prepros将您的更改编译到您的style.css文件中。

转到Prepros，单击“ 更多选项”按钮，然后选择“ 复制实时预览URL” （很有可能是http：// localhost：8000 ），然后将其粘贴到浏览器中。

这将为您提供静态站点的预览，每次Prepros编译您的代码时，该站点都会自动重新加载。

现在，您应该可以在页面背景上看到纯Base64模式拼接。

添加CSS元素

使用CSSHat生成CSS3

让CSSHat为每个设计元素输出CSS3并非易事。只需在打开CSSHat窗口的情况下选择有问题的图层，它将自动生成所需的代码。

您可以在CSSHat窗口的设置中选择一些选项。在我们的例子中，我们希望代码以LESS的形式输出，并且希望CSSHat窗口底部的所有小按钮（注释，尺寸，前缀，规则）都被停用。您CSSHat窗口应如下所示：

请注意，您可以让CSSHat通过单击第四个按钮（看起来像是一个小正方形，其边角处较小的正方形）以px值为您生成高度和宽度代码。但是我更喜欢自己编写，这样我可以在需要的地方更轻松地使用rem / em / %值。

生成所选图层的代码后，只需单击窗口底部的“ 复制”按钮，即可粘贴到style.less文件中。

元素添加过程

现在，我们将继续通过CSS添加其余的设计元素。

因为CSSHat使事情变得如此容易，所以我们可以使用大量的标准流程，直到您的设计被完全编码后，该流程才会重复进行。

对于每个元素，我们首先将相应HTML添加到index.html文件中。

之后，每个新元素将涉及添加一个或多个LESS mixins，我们将使用它们来保存CSSHat生成CSS3。将CSSHat生成的代码与其余样式代码分开是很有帮助的，因此，如果更改设计，则可以轻松地对其进行更新。如上所述，应将新的mixins添加到style.less文件的“ Mixins ”部分。

最后，您将添加实际CSS样式，这些样式将输出到样式表中。这些样式将合并您的mixin以及我将提供的一些额外代码，以控制Photoshop无法处理的布局，尺寸和方面，例如数字字体粗细和“一次一侧”边框。您的样式应添加到style.less文件的“样式”部分。

我们将按照本教程前一部分的顺序创建每个设计元素，以方便您在需要时参考。

添加顶部装饰

添加HTML：

在您的开始和结束正文标签之间添加以下内容。

<br><div class="toptrim"></div>

CSSHat：

选择PSD的“顶部装饰”层，然后复制CSSHat生成的代码：

opacity: .5;
background-color: #ddd;
.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");

新的Mixin：

在您的style.less文件中，创建一个名为TopTrim的新mixin并粘贴到您CSSHat代码中，如下所示：

.TopTrim(){
opacity: .5;
background-color: #ddd;
.box-shadow(~"0 2px 1px #fff, inset 0 -2px 4px #c8c8c8");
}

新风格：

现在，我们将在您的style.less文件的“样式”部分中添加新的混合。添加以下新样式代码：

//Top trim
.toptrim {
height: 8px;
margin-bottom: 62px;
.TopTrim();
}

在上面的代码中，我们将通过TopTrim mixin提取CSSHat生成的样式，并设置所需的布局尺寸。

结果：

现在，您应该可以看到“顶部装饰”在您网站的顶部运行。

创建菜单包装

添加HTML：

在您添加的最后一个HTML下方添加以下内容：

<nav class="menuwrap">
</nav>

CSSHat到新的Mixin：

选择PSD的“ menuwrap”层，复制CSSHat生成的代码，然后将其粘贴到名为MenuWrapBG的新混合中：

.MenuWrapBG(){
.border-radius(12px);
background-color: #f9f9f9;
.box-shadow(~"0 1px 2px #fff, inset 0 1px 10px rgba(0,0,0,.15)");
.background-image(~"linear-gradient(bottom, #fff 0%, #f3f3f3 100%)");
}

新风格：

添加以下新样式代码：

//Menu
.menuwrap {
min-height: 61px;
max-width: 1200px;
width:100%;
margin: 0 auto;
padding: 5px;
.MenuWrapBG;
}

结果：

您现在应该看到：

菜单背景

添加HTML：

将现有菜单代码更新为以下内容：

<nav class="menuwrap">
    <ul class="mainmenu">
    </ul>
</nav>

CSSHat到新的Mixin：

选择PSD的menubg层，并将CSSHat生成的代码复制到名为MainMenuBG的新混合中：

.MainMenuBG(){
border: 1px solid #e4e4e4;
.border-radius(11px);
background-color: #fff;
.box-shadow(~"0 3px 4px rgba(193,193,193,.75)");
.background-image(~"linear-gradient(bottom, #e5e5e5 0%, #fff 100%)");
}

新风格：

添加以下新样式代码：

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
}

结果：

您现在应该看到：

添加菜单项

添加HTML：

将现有菜单代码更新为以下内容：

<nav class="menuwrap">
    <ul class="mainmenu">
		<li><a href="#">Page</a></li>
		<li class="current"><a href="#">Current</a></li>
		<li><a href="#">Page</a></li>
		<li><a href="#">Page</a></li>
	</ul>
</nav>

CSSHat到新菜单项背景混合：

在PSD中，选择一个菜单项矩形，然后将CSSHat生成的代码复制到名为MenuItemBG的新混合中：

.MenuItemBG(){
.background-image(~"linear-gradient(bottom, #eee 0%, #e4e4e4 25.49%, #fbfbfb 100%)");
}

CSSHat到新菜单项文本混合：

在PSD中，选择一个菜单项的文本，然后将CSSHat生成的代码复制到名为MenuItemText的新混合中：

.MenuItemText(){
color: #5b5b5b;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 1px 0 #fff;
}

更新菜单样式：

如下更新现有的ul.mainmenu样式。

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 0;
		border-top: 1px solid rgba(0,0,0,0);
		border-bottom: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
		border-left: 1px solid rgba(0,0,0,0);
		&:first-of-type{
			border-left: 1px solid #dddddd;
		}
		.MenuItemBG();
		a, a:link, a:visited {
			display:block;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
	}
}

我们正在使用LESS规则嵌套，因此ul.mainmenu所有li ul.mainmenu都会受到影响。

您还会回想起在先前的教程中，鉴于Photoshop无法单独设置每个边框，我们不得不手动使用线条工具来为菜单项边框选择颜色。在上面，您将看到我们使用在该阶段选择的颜色代码#dddddd合并了这些边框样式。

我们还在菜单项的顶部和左侧添加了一些透明边框。原因是我们当前的项目/悬停效果将在所有四个侧面上使用边框，因此我们需要确保菜单项在其默认状态和悬停状态下具有匹配的宽度。

最后，由于Photoshop只能使用“ normal”或“ bold”之类的值，因此我们手动将正确的font-weight 400到了菜单项文本中。

结果：

您现在应该看到：

创建“当前”和“悬停”状态

在这种情况下，我们不需要任何额外HTML，因为我们已经在最后一步中添加了将菜单项“当前”应用于其的菜单项。

CSSHat到新的当前菜单项背景混合：

在PSD中，选择“当前”菜单项的矩形，然后将CSSHat生成的代码复制到名为CurrentMenuItemBG的新混合中：

.CurrentMenuItemBG(){
border: 1px solid #e62d4e;
background-color: #ef3d5d;
.box-shadow(~"0 1px 0 #cc2241, inset 0 2px 5px rgba(250,171,185,.6)");
.background-image(~"linear-gradient(bottom, #ef3d5d 0%, #dc2344 25.49%, #fc6b85 100%)");
}

CSSHat到新的当前菜单项文本混合：

现在，选择“当前”菜单项的文本，并将CSSHat生成的代码复制到名为CurrentMenuItemText的新混合中：

.CurrentMenuItemText(){
color: #fff;
font-family: "Roboto";
font-size: 18px;
text-shadow: 0 -1px 0 #b50020;
}

更新菜单样式：

如下更新现有的ul.mainmenu样式。

ul.mainmenu {
    padding: 0 15px;
	margin: 0;
	list-style-type: none;
	min-height:50px;
	.MainMenuBG();
	li {
		display: block;
		float: left;
		padding: 0;
		border-top: 1px solid rgba(0,0,0,0);
		border-bottom: 1px solid rgba(0,0,0,0.05);
		border-right: 1px solid rgba(0,0,0,0.05);
		border-left: 1px solid rgba(0,0,0,0);
		&:first-of-type{
			border-left: 1px solid rgba(0,0,0,0.05);
		}
		.MenuItemBG();
		a, a:link, a:visited {
			display:block;
			height: 47px;
			line-height: 47px;
			padding: 0 30px;
			//added font weight
			font-weight: 400;
			.MenuItemText();
		}
		&:hover {
			.CurrentMenuItemBG();
			a, a:link, a:visited {
				.CurrentMenuItemText()
			}
		}
	}
	li.current {
		.CurrentMenuItemBG();
		a, a:link, a:visited {
			.CurrentMenuItemText()
		}
	}
}

并且，如果可用宽度有两个，则允许将菜单项推入多行，请在现有菜单类下方添加以下clearfix代码。

ul.mainmenu:before,
ul.mainmenu:after {
    content: " ";
    display: table;
}

ul.mainmenu:after {
    clear: both;
}

结果：

现在，您应该看到“当前”样式同时应用于实际的当前菜单项和悬停效果：

添加主要文字

添加HTML：

在菜单HTML下方添加以下代码：

<div class="maintext">
    <p class="thintext">Did you know you can</p>
	<p class="thicktext">Have Your Photoshop</p>
	<p class="thintext">AND YOUR</p>
	<p class="thicktext">Pure Code Too?</p>
</div>

CSSHat到新的Mixin，薄文本：

在PSD中，选择第一行或第三行（灰色文本），然后将CSSHat生成的代码复制到名为ThinText的新混合中：

.ThinText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

CSSHat到新的Mixin，粗文本：

在PSD中，选择第二或第四主文本行（粗文本），然后将CSSHat生成的代码复制到名为ThickText的新混合中：

.ThickText(){
color: #ef3d5d;
font-family: "Roboto";
font-size: 80px;
font-weight: bold;
}

新样式：

添加以下新样式代码：

//Main text lines
.maintext {
    padding: 70px 0;
	text-align: center;
}
.thintext {
	margin: 0.425em 0;
	//added font weight
	font-weight: 100;
	.ThinText();
}

.thicktext {
	margin: 0.425em 0;
	.ThickText();
}

结果：

现在，您应该在菜单下方看到以下内容：

创建信息面板背景

添加HTML：

添加以下代码：

<div class="panel">
</div>

CSSHat到新的Mixin：

在PSD中，选择信息面板的背景矩形，然后将CSSHat生成的代码复制到名为PanelBG的新混合中：

//Panel mixins
.PanelBG(){
border: 1px solid #d7d7d7;
.border-radius(15px);
background-color: #fff;
.box-shadow(~"0 3px 4px rgba(193,193,193,.27)");
}

新风格：

添加以下新样式代码：

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
}

结果：

现在，您应该看到信息面板背景，当前仍然为空：

面板标题背景和文本

添加HTML：

将您的信息面板HTML更新为以下内容：

<div class="panel">
    <div class="panelhead">IN THIS TUTORIAL:</div>
</div>

CSSHat到新的Mixin，面板标题背景：

在PSD中，选择面板标题背景层，然后将CSSHat生成的代码复制到名为PanelHeadBG的新混合中：

.PanelHeadBG(){
.border-radius(10px);
background-color: #ef3d5d;
.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)");
.background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)");
}

添加面板标题第二个阴影：

现在，我们将向已经创建的PanelHeadBG mixin添加第二个阴影。您会从本教程的第1部分中回想起，由于Photoshop无法处理一层上的多个阴影，我们不得不在第二层上创建其他阴影。

在PSD中，选择面板标题的第二个阴影层，然后仅在box-shadow线的括号之间复制代码，该代码应为：

0 5px 3px rgba(0,0,0,.27)

在您刚创建的PanelHeadBG mixin中，在现有box-shadow线的右括号之前添加一个逗号，然后粘贴您刚从CSSHat获取的代码以得到：

.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat到新的Mixin，面板标题文本：

在PSD中，选择面板标题文本，然后将CSSHat生成的代码复制到名为PanelHeadText的新混合中：

.PanelHeadText(){
color: #fff;
font-family: "Roboto";
font-size: 24px;
text-shadow: 0 -1px 0 #b50020;
}

新风格：

添加以下新样式代码：

.panelhead {
    margin: 60px -15px;
	padding: 20px;
	.PanelHeadBG();
	//added font weight
	font-weight: 400;
	.PanelHeadText();
}

请注意，我们添加了一个font-weight的400手动给定的Photoshop不能处理数字字体权重值。

结果：

您现在应该看到：

创建面板文本

添加HTML：

再次将您现有的面板HTML代码更新为以下内容：

<div class="panel">
    <div class="panelhead">IN THIS TUTORIAL:</div>
	<p>Learn how to design in Photoshop and output<br />standards ready pure CSS3 + Base64 code.</p>
	<p>That means no images and minimal HTTP<br />requests for ultra efficient loading.</p>
	<p class="usingthese">CSSHat <span class="highlight">+</span> PNGHat <span class="highlight">+</span> LESS <span class="highlight">+</span> FontAwesome</p>
</div>

CSSHat到新Mixin，默认面板文本：

在PSD中，选择信息面板的较轻的文本层，然后将CSSHat生成的代码复制到名为PanelText的新混合中：

.PanelText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 36px;
}

CSSHat到新的Mixin，较大的面板文本：

现在选择层持有厚重量信息面板文本和CSSHat生成的代码复制到一个名为UsingTheseText新的mixin：

.UsingTheseText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}

新风格：

将现有的.panel样式更新为：

.panel {
    max-width: 1200px;
	width:100%;
	margin: 0 auto;
	padding-bottom: 50px;
	text-align: center;
	.PanelBG();
	.PanelText();
	font-weight: 100;
	p {
		margin: 1.2em 0;
	}
}

这将添加PanelText mixin以及数字字体粗细和信息面板中段落的一些边距控件。

还要在.panel类下面添加以下新样式代码：

.usingthese {
    //added font weight
	font-weight: 900;
	.UsingTheseText();
}

.highlight {
	color: #EF3D5C;
}

这会将较大和较粗的字体样式应用于文本的底行，并添加彩色突出显示。

结果：

您现在应该看到：

添加大向下箭头

添加HTML：

在您的信息面板下方添加以下代码：

<div class="downarrow"><i class="fa fa-arrow-down"></i></div>

因为我们之前将FontAwesome.less合并到了我们的项目中，所以该HTML将仅通过将fa和fa-arrow-down类应用到i （icon）元素来自动将向下箭头放置。

首先，它将以默认的黑色小状态出现，因此我们需要像对待其他任何文本元素一样对它进行样式设置。

CSSHat到新的Mixin：

在PSD中，选择大的向下箭头层，然后将CSSHat生成的代码复制到名为DownArrow的新混合中：

.DownArrow(){
opacity: .3;
color: #6b6b6b;
font-family: "FontAwesome";
font-size: 200px;
}

新风格：

添加以下新样式代码：

.downarrow {
    margin: 80px auto;
	text-align: center;
	i {
		.DownArrow();
	}
}

结果：

现在，您应该在信息面板下方看到此信息：

启动“开始”按钮

添加HTML：

在大箭头html下面添加以下代码：

<div class="buttonrow">
<a href="https://webdesign.tutsplus.com/tutorials/photoshop-to-pure-code-with-csshat-and-pnghat-part-1--cms-20786" target="_blank">
<button class="start"><span class="arrowcircle"><i class="rightarrow fa fa-caret-right"></i></span>
Start the Tutorial
</button>
</a>
</div>

与向下箭头一样，我们对FontAwesome类fa和fa-caret-right自动放置我们要使用的图标，在本例中为右箭头。

CSSHat到新的Mixin，按钮背景：

在PSD中，选择开始按钮矩形层，然后将CSSHat生成的代码复制到名为StartButtonBG的新混合中：

.StartButtonBG(){
.border-radius(10px);
background-color: #ef3d5d;
.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6)");
.background-image(~"linear-gradient(bottom, #ee2c4f 0%, #dc2344 10.5%, #fc6b85 100%)");
}

添加按钮背景第二个阴影：

就像我们在面板标题中所做的一样，我们现在将第二个阴影添加到刚创建的mixin中。

在PSD中，选择按钮的第二个阴影层，然后仅在box-shadow线的括号之间复制代码：

0 5px 3px rgba(0,0,0,.27)

在StartButtonBG mixin中，在现有box-shadow线的右括号前添加一个逗号，然后粘贴刚从CSSHat获取的代码，以得到：

.box-shadow(~"0 3px 0 #cc2241, inset 0 0 5px rgba(222,42,74,.6), 0 5px 3px rgba(0,0,0,.27)");

CSSHat到新的Mixin，按钮文本：

选择开始按钮的文本层，然后将CSSHat生成的代码复制到名为StartButtonText的新混合中：

.StartButtonText(){
color: #fff;
font-family: "Roboto";
font-size: 36px;
text-shadow: 0 -1px 0 #b50020;
}

新风格：

添加以下新样式代码：

.buttonrow {
    text-align: center;
	margin: 20px auto;
}
.start {
	border: 0;
	padding: 0.75em 1em;
	display: inline-block;
	.StartButtonBG();
	.StartButtonText();
}

第一个.buttonrow类仅将按钮居中，而第二个.start类则应用按钮背景和文本样式。

结果：

您现在应该看到：

按钮圆和向右箭头

在这种情况下，我们不需要任何额外HTML，因为我们正在使用上一步中添加的按钮HTML。

CSSHat到New Mixin，箭头圆圈：

在PSD中，选择按钮上方的小圆圈层，然后将CSSHat生成的代码复制到名为ArrowCircle的新混合中：

.ArrowCircle(){
.border-radius(23px);
background-color: #ef3d5d;
.background-image(~"linear-gradient(bottom, #ef4f6b 0%, #e32d4f 100%)");
}

CSSHat到New Mixin，向右箭头：

现在选择小的右指向白色箭头层，并将CSSHat生成的代码复制到名为RightArrow的新混合中：

.RightArrow(){
color: #fff;
font-family: "FontAwesome";
font-size: 36px;
}

新风格：

添加以下新样式代码：

.arrowcircle {
    display: inline-block;
	text-align: center;
	padding-left: 7px;
	margin-right: 10px;
	.size(47px);
	.ArrowCircle();
}

i.rightarrow {
	font-style: normal;
	display: block;
	line-height: 50px;
	.RightArrow();
}

结果：

您现在应该看到：

样式的底部装饰

添加HTML：

在开始按钮HTML下方添加以下代码：

<div class="bottomtrim"><div class="centercircle"></div></div>

CSSHat到新的Mixin：

在PSD中，选择包含两个同心小灰色圆圈的层，然后将CSSHat生成的代码复制到名为CenteredCircle的新混合中：

.CenteredCircle(){
border: 5px solid #ddd;
.border-radius(20px);
background-color: #f1f1f1;
.background-image(~"radial-gradient(center center, 100px 100px, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");
}

调整径向渐变代码：

这是我发现CSSHat输出与PSD中的输出完全不匹配的地方。更改mixin的background-image线，将center center, 100px 100px替换为center, ellipse cover如下所示：

.background-image(~"radial-gradient(center, ellipse cover, #ddd 0%, #ddd 39.99%, #f1f1f1 44.75%, #f1f1f1 100%)");

新风格：

添加以下新样式代码：

.bottomtrim {
    margin: 120px 0;
	height: 15px;
	border-top: 5px solid #ddd;
	border-bottom: 5px solid #ddd;
	text-align: center;
}

.centercircle {
	display: inline-block;
	margin-top: -17px;
	.size(40px);
	.CenteredCircle();
}

第一类.bottomtrim创建底部装饰的两条灰线，而.centeredcircle类确定大小并将同心灰色圆圈定位在这两条线上。

结果：

现在，您应该在设计的底部看到此内容：

结语

而已！现在，您应该拥有完整的静态设计，并且具有所有纯代码荣耀，如下所示：

附加功能

就本教程而言，我们将所有内容保持简单，但是如果您愿意，您可以使用此过程中涉及的代码做更多的事情。

在某些情况下，我们通过重新使用字体系列声明和颜色来加倍样式，因此您可以将字体系列和颜色定义为变量，并使用它们来方便以后进行更新。

CSSHat还支持Stylus + Nib和Sass / SCSS + Compass中的输出，因此，如果其中之一是您首选的预处理器，则可以尝试使用它们。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-code-a-photoshop-layout-with-csshat-lesshat-and-pnghat--cms-20997

photoshop使用技巧

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
photoshop使用技巧_如何使用CSSHat，LESHsat和PNGHat编写Photoshop布局的代码

您将要创造的在上一教程中，我们介绍了如何在Photoshop中准备设计，以准备转换为纯CSS3和Base64代码。在本教程中，我们将借助Source制造的Photoshop插件CSSHat和PNGHat以及FontAwesome和CSS预处理器LESS来处理实际的代码生成。让我们直接潜入！创建您的文件和文件夹结构首先，您需要在计算机上创建一个新文件夹来容纳您的静态网站。在...
复制链接

扫一扫