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文件夹拖到主界面上以将其添加为新项目。
style.less文件,默认情况下将激活“自动编译”。 每当您保存对style.less的更改时, Prepros都会检测到该更改,然后编译为css> style.css
style.less以查看其他可用设置,例如在编译过程中压缩CSS的选项。
合并LESSHat和Normalize.less
现在继续抢文件LESSHat ,一个mixin库,在精美的关系与CSSHat,以及Normalize.less ,写得不那么友好语法的版本“Normalize.css”的。
style.less中
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;
}
style.css文件中。
更多选项”按钮,然后选择“ 复制实时预览URL” (很有可能是http:// localhost:8000 ),然后将其粘贴到浏览器中。
这将为您提供静态站点的预览,每次Prepros编译您的代码时,该站点都会自动重新加载。
现在,您应该可以在页面背景上看到纯Base64模式拼接。
添加CSS元素
使用CSSHat生成CSS3
让CSSHat为每个设计元素输出CSS3并非易事。 只需在打开CSSHat窗口的情况下选择有问题的图层,它将自动生成所需的代码。
您可以在CSSHat窗口的设置中选择一些选项。 在我们的例子中,我们希望代码以LESS的形式输出,并且希望CSSHat窗口底部的所有小按钮(注释,尺寸,前缀,规则)都被停用。 您CSSHat窗口应如下所示:
请注意,您可以让CSSHat通过单击第四个按钮(看起来像是一个小正方形,其边角处较小的正方形)以px
值为您生成高度和宽度代码。 但是我更喜欢自己编写,这样我可以在需要的地方更轻松地使用rem
/ em
/ %
值。
复制”按钮,即可粘贴到style.less文件中。
元素添加过程
现在,我们将继续通过CSS添加其余的设计元素。
因为CSSHat使事情变得如此容易,所以我们可以使用大量的标准流程,直到您的设计被完全编码后,该流程才会重复进行。
index.html文件中。
style.less文件的“ Mixins
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:
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:
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到新菜单项背景混合:
MenuItemBG的新混合中:
.MenuItemBG(){
.background-image(~"linear-gradient(bottom, #eee 0%, #e4e4e4 25.49%, #fbfbfb 100%)");
}
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到新的当前菜单项背景混合:
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到新的当前菜单项文本混合:
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,薄文本:
ThinText的新混合中:
.ThinText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 48px;
}
CSSHat到新的Mixin,粗文本:
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:
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,面板标题背景:
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无法处理一层上的多个阴影,我们不得不在第二层上创建其他阴影。
仅在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,面板标题文本:
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,默认面板文本:
PanelText的新混合中:
.PanelText(){
color: #6b6b6b;
font-family: "Roboto";
font-size: 36px;
}
CSSHat到新的Mixin,较大的面板文本:
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:
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,按钮背景:
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中。
仅在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,按钮文本:
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,箭头圆圈:
ArrowCircle的新混合中:
.ArrowCircle(){
.border-radius(23px);
background-color: #ef3d5d;
.background-image(~"linear-gradient(bottom, #ef4f6b 0%, #e32d4f 100%)");
}
CSSHat到New Mixin,向右箭头:
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:
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中的输出,因此,如果其中之一是您首选的预处理器,则可以尝试使用它们。
photoshop使用技巧