个人工作室网页设计(工作室网站设计)-东辰网

个人工作室网页设计(工作室网站设计)

本文主要介绍个人工作室网站设计(工作室网站)，下面跟着东辰网详细了解一下吧。

和往常一样，我希望通过实例教程传达布局架构的理念，而不仅仅是一点一点地告诉你网站是如何设计的。所以我希望看到更多灵活应用的扩展版本。期待你的创新。

在本教程中，你将学习如何创建一个网页布局的花式s设计工作室。

1.首先，你需要下载下面两张素材图片。

用PS打开开始张图片，然后点击编辑定义图案。选择此模式的名称，然后您可以关闭此文件。

2.这是第二张图。请下载原尺寸图片，或者在下载包里找。

3.新建一个文件，大小:1100*1260px。

选择油漆桶工具，选择图案模式，找到刚才设置的材质图片，点击背景层，就会看到画布有了想要的纹理。

4.在页面布局的底部，填写第二张图片，命名层底部和底部，并将图层模式设置为正片叠加。

5.复制第二张图得到底部副本并将其移动到页面的中上位置。

6.接下来，进行导航。使用圆角矩形工具，设置半径为15px，大小:940*99px。

7.圆角矩形使用下面的图层样式。

8.使用线条工具画一些垂直线。我用以下颜色填充#5e5a59。

9.然后使用矩形工具绘制一个简单的形状，并添加一个较暗的颜色。此形状用于按钮事件。当你用鼠标滑动时，你可以从页面上看到它的变化。当然，在程序员的配合下，可以用CSS实现，这也很棒！

10.我想在导航区域添加一些文本。

个人喜欢这种导航风格，宽敞的高度布局，主副标题的设计。注意，小字不是二级导航，而是用一些简单的话概括了每个一级导航是什么。类似的扩展描述。更具创新性。

11.然后，用铅笔工具画一些箭头。使用铅笔工具时，可以将笔尖设置为1px。正如你所看到的，白色像素在箭头下面，而椭圆工具创建了一个圆形的底部方框。

12.在导航下方创建一个大的圆角矩形，用于放置类似幻灯片的图片动画翻转区域。

13.将操作按钮添加到横幅的动画区域，使用与导航相同的箭头样式。

14.在横幅矩形下，使用椭圆工具添加一个黑色形状，如下所示。

15.然后用滤镜模糊高斯模糊。将半径设置为810px。

16，然后使用编辑变形扭曲，设置如下图。

17.下一步在橙色铅笔里。使用圆角矩形工具绘制一个橙色形状，并添加文本信息。原来的英语课程给了一个网站下载矢量素材，可惜这个网站已经不存在了，用代理爬墙也没找到，只能换成位图。

18.继续创建一个简单的橙色按钮。这个按钮要非常明显，会增加你的转化率。切换到你网站上的热门关键词，醒目的按钮可以赢得更多的点击。

19、继续给页面添加一些图标和文字，注意图标效果和文字布局。

20.图标的图层样式参数如下。

21.下一步是创建一个标志。

22.最后可以看到最后的结果。