月度归档:2014年10月

PSD网页切图制作HTML全过程教程

今天的这个教程,教大家如何把psd页面利用div+css切割成html页面,这类的教程,本站做的一直都很少,大多讲的都比较零碎的一些东西,在今后,我们将慢慢发布翻译出更多这类的教程,供大家学习,转载请著名来源,以及站码翻译,谢谢….

首先看看效果

下面的图片就是效果图,切割出来后,可能头部和底部会宽点…..

Code a Web Template from PSD to HTML

新建文件夹

开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为index.html,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名为style.css文件。如下图:

Code a Web Template from PSD to HTML

打开index.html文件。在head标签顶部,添加链接到您的样式表(style.css)。你可以使用下面的代码。

<link href="style.css" rel="stylesheet" type="text/css" />

头部的代码如下面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modern Design Studio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

建立HTML结构

现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像下面一样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

切割背景

我们的PSD文件包含了很多纹理效果,我们要把这些全部切出来,然后,用代码添加到网页上面,使div页面效果和设计的效果达到一致。

<body>
<div id="header">
  <div id="container">

  </div>
</div>
<div id="content">
  <div id="container">

  </div>
</div>
<div id="footer">
  <div id="container">

  </div>
</div>
</body>

现在在photoshop里面打开原先设计好的, 隐藏所以的图层,除背景层外.

Code a Web Template from PSD to HTML

现在采取的切片工具,选择背景,保存网页web格式按(ALT +shift+Ctrl + S)。然后保存的图像文件夹文件名为background.jpg。

Code a Web Template from PSD to HTML

设置背景样式

打开style.css文件,设置基本样式,还有背景样以及主体部分的宽度,如下代码:

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

 

切割头部

返回photoshop,隐藏所以图层,除头部背景外,并用同样的方法,把头部背景图片切割保存为web格式,保存文件名为head.jpg。

编辑头部背景代码

在style.css文件里编辑如下代码:

#header
{
	background:url(images/header.jpg);
	height:124px;
}

切割头部logo

在这时,切割logo层,隐藏所有图层,包括背景层,如上同样方法切割logo层保存为logo.png,注意:保存为png格式图片

Code a Web Template from PSD to HTML

添加在页面添加logo

现在返回到html中,在#header #container内,添加下面的代码<div id=”logo”>….</div>.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
   </div>
</div>

现在, 下面切换到style.css文件,编写#logo样式.

#logo
{
	margin-top:20px;
	border:none;
}

编辑导航代码

下面是页面里的代码,头部header包括logo和导航两个部分.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </div>
</div>

导航样式如下:

现在,添加css表里的导航样式~,ul、li和链接a的样式:

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

现在制作中间部分

现在我们在页面的中间部分content添加两个div,如下图:

<div id="content">
  <div id="container">
      <div id="featured">

     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

切换到photoshop的psd页面, 切下中间部分,取名为featured.jpg.如下图:

Code a Web Template from PSD to HTML

 

在你的HTML页面添加如下代码, 和一些文字介绍:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

在PSD文件里,隐藏其他所以图层,只留下按钮图层部分,切下按钮部分,保存png格式,命名为button.png.

Code a Web Template from PSD to HTML

现在我们把这些图片添加到页面中去,切换到css文件页面,添加如下代码,这里包括背景样式,和按钮的样式.

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

现在我们添加些dummytext(文字介绍)的样式:

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

下面添加添加图片展示下面的分类介绍部分

页面的代码部分如下.

<div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
</div>

我们中间部分的内容,整体看起来应该是这样的:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
     </div>
  </div>
</div>

去你的CSS文件添加下面的代码,

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

这个就是我们到目前位置的效果:

Code a Web Template from PSD to HTML

下面处理网站底部

现在,我们完成该部分内容,我们将开始创建页脚.

首先,在你的PSD文件中,隐藏除页脚和页脚纹理层外的其他层,然后把页脚文件夹的东西切片并保存为footer.jpg.

Code a Web Template from PSD to HTML

然后再切一遍,把按钮和鸟的图形切下来.分别取名为follow.png和 bird.jpg.

编辑底部代码

底部页脚包括一些文字和一个带有链接的小鸟图片.

所以在HTML页面添加如下代码.

<div id="footer">
  <div id="container">
    <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p>
    <a href="#">Follow us on Twitter</a>
    <img src="images/bird.jpg" />
  </div>
</div>

现在, 编辑底部footer样式的代码,如下:

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

我们用footer.jpg 做页脚的背景,然后添加一些文字的样式.

对于底部的鸟图片的链接,我们用之前同样的办法,利用浮动效果定位。

最终效果

Code a Web Template from PSD to HTML

文件下载地址 (0,7 MB)

到现在就算是结束了,不知道大家有没有看懂,不懂的就留言,什么地方不懂,我再添加修改下,哈哈~ .

切图小贴士-教程分享

来源:uimaker.com   作者:mux

 

 

用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图、精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果哦!

我们经常会做一个俗称“点九”的切图,什么是“点九”呢?“点九”是Android平台处理图片的一种特殊的形式,由于文件的扩展名为:“.9.png”,所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下,发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸,而保留像素精细度、渐变质感和圆角的原大小,实现多分辨率下的完美显示效果,同时减少不必要的图片资源,可谓切图利器。

“点九”的制作工具为“draw9patch”,具体制作步骤这里不多讲了,插播小贴士第一条:舍弃这个制作工具吧,减少繁琐的步骤,不要再每张图片都拖到工具里画啦!直接用ps+铅笔就可以画哦。

“点九”的学问当然很大,但Android切图不仅需要清楚“点九”的方法,还有其他各种小技巧。下面为大家分享我在工作中总结的几个关于切图的心得。
 

(一)站在开发的角度来切图

了解技术实现方式,就像了解一位开发同学,更多的了解,会让工作更加顺畅。
如为下图按钮做“点九”图,一部分同学可能会这样做:


 

这是一张高度不变左右拉伸的“点九”图片,内容显示区域为整个按钮范围。按钮效果图上看,文字是垂直居中显示的,开发同学拿到这张“点九”图片,就会在代码里写上center的属性,此属性就是设定让文字在按钮的垂直居中位置。说到这,有没有察觉出问题呢?先让我们看一下实现出来的效果怎么样。


 

拥有像素眼的设计师们,立刻会察觉文字偏下了。然后找开发同学调整文字的位置,“把文字向上n个像素吧,没有居中”等等,这是很经常发生的对话,开发同学会增加代码微调文字的位置以达到效果图效果。事情圆满解决了吗?不然。其实是我们错了。

当我们了解开发同学实现方法后,我们可以试试用逆推法验证这张“点九”图片是否还有进一步精确的可能。

 


如上图,设计效果图中红色区域是文字排版区域,是理想化的位置,1和2的高度是相等的;而实现效果图中3和4的高度是相等的。问题出现了!在我们画点九的时候,把投影的高度也画进去了,所以视觉上文字就偏下了。

我们通常的画法应该是:

 

 

 

 

1. 在高度不拉伸的情况下,在空白区域点一像素的点。

这是与开发同学之间约定俗成的习惯,凭着默契就知道此按钮高度不进行拉伸,而且就是被拉伸了,拉伸的是空白区域,视觉上也不会造成影响。

对比如图所示:

 



 

2. 内容显示区域的高度要避开投影区域,这样可以保证文字视觉的居中。

“点九”图片的内容显示区域,我喜欢称为内容排版区域。在切图的过程中,还会发现不同的情景,要时刻想着你要的结果,通过对此区域的仔细处理,可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定,就可以实现效果图上精确的布局。同时减少不必要的开发,精简代码,提高产品的性能,积少成多,带给用户更好的体验感受。
 

(二)选择更优的切图方式

当我们遇到异形或较为复杂的切图时,往往需要抛开固有的思维程式,去找到更适合的切图方式。举例如为下图浮层切图的时候,我们还可以用我们的利器“点九”么?


 

首先分析一下此浮层的几个特点:一是半透明渐变有厚度又有投影的效果;二是有三角异形,而且位置不固定。在切图的时候先走了一下小弯路,用固有思维把浮层分成了上下两个部分,下面方形做成“点九”,上面三角形单独一个切图,用拼接的方式去实现。这是符合开发同学的原子拆分设计模式的,把会变化的部分取出并封装起来,让其他部分不受到影响。所以开发同学很快做好了实现,但效果不尽人意。我们其实可以预想得到,因为有投影效果上下拼接一定有重叠,这样拼接处就会有一条明显的线。

那怎么办呢?经过设计师的进一步思考,终于找到了一种更适合的切图方式:

 

左右分割成两个“点九”图片,这样即能保证连接处的效果,又能灵活三角指向的位置。思考好如何切图的同时也要跟技术同学沟通能否实现,衡量实现的成本。最后值得高兴的是,实现出来的效果­跟设计效果图没有任何出入。
 

(三)尽可能的减小资源的大小

切图的时候尽可能减小资源的大小,为产品安装包瘦身。
 

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的,所以尽量缩小图片的尺寸。

(在上面的例子当中,为了保持看得清楚,没有缩小到最小情况,在实际工作中可以稍加注意。)
 

2.当我们遇到有纹理的背景或有纹理的按钮时,切图原则为:找到纹理的规律,用最小的切图去平铺,可以想象中图案叠加的原理。

第一种纹理背景,如输入法多媒体中随写输入的界面,不同的信纸,我们就用了尽可能最小的切图去平铺而实现的。如下图:


 

这是我们输入法中信纸的切图,遵循用最小切图的原则,按照不同纹理的规律调整到最小的切图,所以可以看出不同纹理的切图尺寸是不一样的。

第二种有纹理的按钮,我们一般会这样处理:


 

我们的目标是把按钮分成三段,保留左右圆角部分,找到中间纹理可复用平铺的部分,同事确保中间纹理可以与左右两张图无缝连接,这样按钮的长度就变成可控的了,可以适用于不同的场景。

首先找到纹理的规律,这里的斜线纹理只需切宽为3px的图即可;然后用纹理图片去尝试左右圆角部分,连接到圆角部分的纹理就成功咯。遇到其他类型纹理切图时,思路是可以复用的。
 

3.适当压缩图片质量,在单色或没有过多效果时可存储为png8位或索引模式。

这里就不做举例了。
 

小结

设计师在提供设计规范后愁苦实现效果不尽如人意的同时,可以尽可能的利用一些切图手段,帮助你的设计达到零差别的呈现,同时也帮助开发同学减少了很多不必要的开发负担,对于产品本身也有提高运行速度等很多不言而喻的好处。让设计师同学与我们亲爱的开发同学成为更贴心更默契的合作伙伴吧!

以上为工作中关于Android切图的一点小经验,如有错误或不足的地方请大家指正,同时欢迎大家分享更多的切图经验与技巧。

移动设备切图

来源:尧子   作者:尧子

在App设计的最后阶段——切图。下面给大家带来有关切图的入门教程,讲讲切图的一些原理、手机大小尺寸,快一起来瞧瞧吧~~

手机网站的宽度自适应

如何设置使得手机网站的宽度能够自动适应手机屏幕的大小呢?下面介绍两种方法解决这个问题。

方法一:

在网页的<head>中增加如下这段代码,可以让网页的宽度自动适应手机屏幕的宽度。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0 :表示初始的缩放比例

minimum-scale=0.5 :表示最小的缩放比例

maximum-scale=2.0 :表示最大的缩放比例

user-scalable=yes :表示用户是否可以调整缩放比例

如果希望打开网页就自动以原始比例显示,不允许用户修改的话,则将以上代码修改为:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />

方法二:

把页面最顶部类似下面这段代码:

<!DOCTYPE ……..>

替换为:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

注:此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码。

如何判定用户是否关注微信公众号

if (empty($openid)){
        if (empty($_REQUEST["code"])) {
            $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$APPID."&redirect_uri=".$redirect_url."&response_type=code&scope=snsapi_base&state=blinq#wechat_redirect";
            echo $this->assign('url', $url)->fetch('redirect');
            return;
        }else{
            $code = $_REQUEST['code'];
        
            $APPID = C("APPID");
            $SECRET = C("SECRET");
            $accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $APPID . "&secret=" . $SECRET . "&code=$code&grant_type=authorization_code";
            $ch = curl_init($accessTokenUrl);
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0');
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            $info = curl_exec($ch);
            $dataJson = json_decode($info, true);
            $openid = $dataJson['openid'];
            $userdata = $table->get_subscribe_res($openid);
            $subscribed = $userdata['data']['subscribed'];
            if($subscribed){
                session("openid", $openid);
            
            }else{
                $url="http://www.oschina.net/code/step1?catalog=";
                echo $this->assign('url', $url)->fetch('redirect');
                return;
            }
        }
    }