如何通过Photoshop四步打造HTML5网页？

时间：2023-09-03 13:18:01 | 来源：网站运营

时间：2023-09-03 13:18:01 来源：网站运营

如何通过Photoshop四步打造HTML5网页？：很多朋友肯定都是事先使用Adobe PhotoShop，Adobe Illustrator 等软件设计一个网页的界面的。这么做可以保持最大的自由度并且有充分的空间发挥，但是设计是设计，实践就又是另一回事情了。通常把一个网站打造成和想象中的一样是一件很难的事情，你需要精通CSS，并且你不很难做到一个快速的预览，从而需要不断刷新页面并且调整相关参数。但是现在通过Adobe公司推出的最新版Adobe Photoshop CC2017， 你可以直接在PS上面做好网页设计然后快速实现整个HTML文件的生成。

有两种方法可以做到，第一种是依靠Extract，这个方法很简单，上传PSD到Adobe Creative Cloud的云端就可以，但是要求正版。各位手头拮据的个人设计者就很难成功上传文件，所以在这里不予介绍，敬请谅解。第二种呢就是今天要讲的，通过Adobe Photoshop的黑科技：复制CSS。

（第一次见到这个功能，我是十分惊讶的）

现在我就开始切入正题，通过我目前个人正在开发的一个学校项目为大家讲解如何实现通过Adobe Photoshop生成网页。

第一步：设计好你的网页

打开Adobe Photoshop CC2017，新建，选择Web，选择你需要的格式，新建。这里需要强调的是，请务必不要使用这个对于PS新手来说最喜欢的东西：栅格化图层（Rasterize Layer），虽然方便，但是对于CSS代码来说，栅格化的图层是不可以读取出来参数的。然后请尽量使用分组（Group）来归类每一个部件。

（请不要喷我的设计谢谢；））

如图所示，大家设计好自己的网页后开始进行分组归类，不要栅格化，除非是背景图片。另外要注意如果是中文版的PS请务必将所有的图层改名为英文，CSS不支持中文名的变量（除了C++翻译器易语言以外应该没什么语言支持非英文的变量名字吧）。

第二步：复制CSS，接下来在Canvas1或者画板1（如果写着画板1请一定要改成英文）上面右键，然后选择复制CSS，过一会儿你的CSS就复制好啦（除非是像我的一样有很多部件的，其他的应该都复制得很快的，基本是秒复制）！

第三部：创建CSS列表

打开任意前端编辑器（推荐Sublime编写js，这里使用DreamWeaver方便进行CSS和Html的调试），新建CSS文档，然后按下Ctrl+V，一长串代码就出来啦！是不是很黑科技呢！

（一般报错了没事的，CSS是一种标签语言，宽容度很高，HTML同理）

第四步：应用CSS

新建一个HTML文档，然后新建任意部件。拿我的网页打个比方，我在PS里面设计了一个菜单栏，菜单栏属于一个Div层（Div相当于HTML里面的图层），所以我新建一个Div，然后让class链接到我的菜单栏CSS代码。

<div class = "Rectangle1"><button class = "MenuButtonRec" OnClick = "A()"><button><p class = "HomeButtonText" OnClick = "A()"><button></div>以上的代码的意思是，我新建了一个Div层，然后连接到了PS里面的菜单栏，接着在里面放了一个按钮和按钮上的文字，同样链接给了相应的PS里的部件。通俗地说就是我先画了一个菜单栏，然后把按钮和按钮的字都画上去。注意这里，最好给一个组的部件都统一新建一个Div放在Div里面，这样子可以方便管理，个人认为一个好的程序员是非常讲究代码美观的。

图片中可以看到运行网页后的效果。

通过以上四步就可以快速建立一个和想象中差不多的网页，接下来放上我自己做出来的成品。

（请无视旁边的画风突变的下拉框，那个是我从网上找到套上去测试的嘿嘿嘿）

我们可以看到网页在Chrome里面运行的状态十分良好，接下来是PS里面的设计图。

几乎是一模一样的。


好啦教程到这里就结束了，希望大家喜欢！