PS网页设计教程IX——巧用大括号设计惊艳的咨询页面

简介: 作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。 本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。

作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教。

约定:

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数

例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77

例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

 

With this layout you will be able to easily build a web site dedicated to teaching and learning, or a business layout, as well as management or marketing layouts. This layout can be transformed also in a WordPress theme.

致力于教学和学习,此布局使能您将能够轻松地构建 web 站点,或业务布局,以及管理或市场营销布局。这种布局可以转换成一个 WordPress 主题。

 

I will use my default document size: 960 x 900 pixels.
我将新建一个文档,文档默认大小为:960*900px

image

 

Feel free to use any size you want.

你也可以使用其他的尺寸


Set your foreground color to #1f0f0e and then with Paint Bucket Tool press one time on your canvas. This will be the background of our consulting layout.
设置前景色为 #1f0f0e,用油漆桶工具在你的画布上喷涂一下。这是我们的咨询页面的背景。

 

Select you Horizontal Type Tool, and type a brace. I have used the following font, and size:

选择水平文字工具,输入一个大括号,我将如下图设置字体、尺寸等

image

注:关于字体的方式是“锐利”还是“柔和”,要亲自实验才行,笔者做了两次,分别得用不同的方式,才有本教程下面的样子,也不知为何。

 

Right click on the layer in your layer palette, and choose Convert to shape

在图层面板上右键文字图层,选择转换为形状

 

Rotate this shape until you have something like this. To rotate a shape you can select the shape, then press on CTRL+T, and then with mouse too rotate the shape. Another way to rotate a shape is to go to Edit > transform > rotate….

旋转该形状如下图。旋转该形状,你可以选择该形状,然后按Ctrl+T,用鼠标去旋转该形状。另一个办法是,点击:编辑 > 变换 > 旋转...

经测算,该形状的位置点为(43,296,260,84)

image

 

Duplicate the shape a few times and with Move Tool, place them like in the following image

复制该形状多次(三次),用移动工具,摆放如下图所示:

自下而上的四个形状分别为

(43,296),颜色: #483d3c

(43,285),颜色: #ff2609

(43,275),颜色: #ffffff

(43,265),颜色: #ded3d1

image

 

I will change the foreground color to #3d302f, and I will create a rectangle with Rounded Rectangle Tool. I will place this layer under the previous ones.

将前景色更改为 #3d302f,用圆角矩形工具创建一个圆角矩形(43,225,260,650),将该图层移到刚刚四个形状的下方

image

 

With Rectangle Tool I will create another shape on the top. The color used to create this shape is: #ded3d1

用矩形工具在顶部创建一个新的矩形。该矩形的颜色为: #ded3d1

建议是圆角矩形,半径为50px,位置(43,-50,250,400)

image

 

On top of the layout I will add another shape

在页面的顶部,还是要新建另一个矩形

注:为了后续的操作方便,在此步的矩形的高度调的大一点,矩形为(0,0,960,90)

image

 

With Pen Tool I will create a shape like in the following image. I want to create a round corner.

I will duplicate this shape (press CTRL+J), and I will place it on the other side of the layout.

I will go to Edit > Transform > Flip Horizontal. If this option is not enabled, then you need to select the layer in your layer palette. The next step is to align this layer. This is my result.

用钢笔工具创建如下图所示的形状。我创建了一个圆角

复制这个形状(按Ctrl+J),移动该形状到页面的另一边

点击:编辑 > 变形 > 水平翻转。如果该选项没有激活,你需要在图层面板选中该图层,接下来就是对齐该图层

 

还是不擅长钢笔工具的使用,于是换了一个思路,选中圆角矩形工具,半径设置为10px,新建一个圆角矩形(-37,72,80,40),颜色为: #1f0f0e

image

再用同样的颜色新建另一个圆角矩形(303,72,700,40)

image

 

On the right side I will create 2 shapes with Rounded Rectangle Tool.

在右侧用圆角矩形工具创建两个圆角矩形。分别是(328,96,593,242),颜色: #ded3d1;和(328,370,593,500),颜色: #aea2a2

For both layer I will add the following layer styles

对这两个图层添加如下的图层样式:

image

image

 

This is my result

这是我的结果

image

 

On the top I will create a button with Rounded Rectangle Tool.

在顶部用圆角矩形工具创建一个按钮(325,35,118,118),由于后面还要切除按钮的一部分,所以制作正方形的按钮比较容易

image

 

I will right click on the layer in my layer palette, and I will choose rasterize layer. With Rectangular Marquee Tool, draw a selection on the bottom of the shape

在图层面板上右键,选择栅格化图层。用矩形选择工具,在按钮的底部画一个选区。

image

 

Be sure you have the layer with the button selected, then hit delete key from your keyboard and press on CTRL+D to deselect. After I will apply a nice gradient from this set: 27.000 Photoshop gradients my button looks like this:

保证按钮的图层被选中,然后按键盘上的delete键,然后按Ctrl+D取消选择。接下来我要从27.000 Photoshop gradients添加一个漂亮的渐变,我的按钮如下图所示:由于没有注册为会员,故手动添加渐变,如下图所示,

image

image

左边的颜色: #5a4f4d,右边的颜色: #3e3331

image

 

I will duplicate this button and with Move Tool I will place it near this one.

复制该按钮,用移动工具移到合适的位置

对第二个的按钮添加合适的渐变,如下图所示:

image

image

左边的颜色: #ff4a2b,右边的颜色: #ff2000

对五个按钮分别添加文字:ABOUT US、SERVICES、PORTFOLIO、BLOG、CONTACT。文字的式样设置如下:

image

image

 

You will notice a red button. I have used another gradient from our huge gradient set.

你注意到那个红色的按钮。我从our huge gradient set添加另一个渐变。(还是自己设置渐变,设置如上

 

In the middle of my business consulting layout I will create three shapes, and three brace.

在我的商业咨询布局的中间,我要创建三个圆角矩形,和三个大括号

I will change the color of the round shapes to white, and I will select all 6 layers in my layer palette. Then I will press on CTRL+E to merge all the layers into a single one.  With Brush Tool I will draw over the empty spot. This is my result so far.

将圆角矩形的颜色改为白色。选择这6个图层。然后按Ctrl+E合并图层到一个图层。用画笔工具填充空白部分。这是我的结果

 

我的做法是:

1、新建一个圆角矩形(338,377,184,159),颜色为白色

2、用文字工具输入右大括号,字号为194,字体为Book Antiqua,旋转90度。然后移到合适的位置

3、再用矩形工具填充空白部分

4、合并刚才的三个图层,然后复制两次,移到合适的位置

image

 

For this layer I will add the following layer styles.

对这些图层添加如下的图层样式

image

image

 

image

 

After I will add some icons this is my result

接下来添加一些图标,和一些文字

image

 

With Rectangle Tool, I will create a shape on the bottom of the layout

用矩形工具,在布局的底部添加一个白色的矩形(324,696,600,144)

image

 

It is time to add some text with Horizontal Type Tool. Please click on the image to see how I placed the text.

用文字工具添加一些文字。对照图片摆放文字,并且添加一张图片

image

 

Right under the logo I will create some shapes with Rounded Rectangle Tool. I will use a white color for all these shapes, and I will lover the fill value for each layer to 40 %.

在LOGO的下方添加一些圆角矩形。颜色:白色。对这些图层设置填充为40%

image

image

 

I will place some text over the buttons.

我要在按钮上添加一些文字

image

 

This is my final consulting layout. I hope you like it, and if you want to use it for your website please let me know. I really want to see how it looks.

这是我最终的咨询布局。我希望你会喜欢它,并且让我知道你会用在你的网站布局中。我真的想知道你的作品。

 

后记:

利用大括号巧妙的实现布局。有时候看起来惊艳的效果,其实也就是一些小小的技巧。

相关文章
|
人工智能 自然语言处理 搜索推荐
办公方式革新,手把手教你打造超实用 AI 助理
在AI重塑企业办公的时代,钉钉AI助理成为智能化变革的关键工具。通过连接企业知识库,提供智能问答服务,它能高效解答员工的各种问题,提升工作效率与体验。搭建钉钉AI助理需先整理企业知识,登录钉钉创建并个性化设置助理,添加知识文档,确保其稳定运行。这一智能助手不仅能提高沟通效率,还能降低人力成本,助力企业迈向智能化管理。
1408 1
|
弹性计算 网络协议 安全
安全组规则
安全组规则
560 3
AC/DC电源模块的工作原理基于一系列的电子组件和电路
AC/DC电源模块的工作原理基于一系列的电子组件和电路
AC/DC电源模块的工作原理基于一系列的电子组件和电路
|
Kubernetes NoSQL 应用服务中间件
k8s-Helm包管理器
k8s-Helm包管理器
336 1
k8s-Helm包管理器
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
1303 3
|
机器学习/深度学习 人工智能 编解码
AI生成壁纸的工作原理
AI生成壁纸基于深度学习和生成对抗网络(GANs),通过生成器与判别器的对抗学习,以及条件生成对抗网络(CGANs)来创造特定风格的壁纸。技术还包括风格迁移、深度卷积生成对抗网络(DCGAN)、潜在空间扩展和自注意力机制。审美评价机制的引入确保了生成的壁纸既符合技术标准又有艺术价值。CGANs能根据用户条件生成个性化壁纸,而风格迁移技术通过多种方法实现图像风格转换。DCGAN和其他GAN变体在处理图像数据时有优势,如高质量样本生成和特征学习,但也存在图像质量、训练效率和模式崩溃等问题。通过构建审美评估模型和使用XAI技术,AI在生成壁纸时能更好地平衡技术与艺术标准。
|
开发框架 算法 测试技术
提升你的VB项目:模块化和代码重构的最佳实践
【4月更文挑战第27天】本文探讨了如何在Visual Basic(VB)项目中实现模块化设计和代码重构,以提升可维护性和可扩展性。通过模块化减少复杂性,遵循高内聚、低耦合原则;利用类、命名空间等实现模块化,借助.NET框架增强灵活性。代码重构包括改进结构、消除重复、封装变化点,利用现代VB特性简化代码,同时重视单元测试和持续集成确保质量。性能优化和案例研究提供实践经验,助力VB项目保持高效和适应未来发展。
517 2
|
存储 安全 文件存储
Android OTA升级后输入法异常和应用丢失的分析
Android OTA升级后输入法异常和应用丢失的分析
584 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小零食销售系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小零食销售系统附带文章源码部署视频讲解等
266 0
|
机器学习/深度学习 人工智能 自然语言处理
构建未来:移动应用中的人工智能集成与用户体验优化
【4月更文挑战第3天】 随着人工智能技术的不断进步,移动应用领域正在经历一场革命。本文将深入探讨移动应用中人工智能集成的最新趋势,以及如何通过这些技术提升用户体验。我们将分析自然语言处理、机器学习和计算机视觉等AI技术在移动应用中的具体应用场景,并讨论它们对用户互动、个性化服务和智能推荐系统的影响。此外,文章还将提出一系列策略,帮助开发者在保持用户隐私和数据安全的前提下,有效地集成人工智能功能。