优艾设计网

Photoshop设计网页定价表

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:臣子木
  在这篇用户界面设计教程中,我将向您展示如何用Photoshop设计一个时尚的定价表界面。定价表常见于一些基于web应用程序的网站。我们将运用横排文字工具和圆角矩形工具等来完成我们的这项任务。我将向您展示如何

最终效果如下图:

Photoshop设计网页定价表

 

 

 

 

 

 

  现在我们将创建一个小的圆角矩形来展示定价计划的名称。在这一列的最顶端,设置圆角矩形工具半径为5px,创建一个130*40px的圆角矩形。

Photoshop设计网页定价表

  给该矩形设置阴影和渐变叠加,参数如下:

Photoshop设计网页定价表

Photoshop设计网页定价表

Photoshop设计网页定价表

  用钢笔工具在圆角矩形的两端分别画一个小斜角(如下所示),这将使其呈现出环绕着价格列的效果。

Photoshop设计网页定价表

  选择横排文字工具,设置字体大小为20px,字体颜色为白色,字体可任选,然后在矩形上方写上计划的名称(在本教程中,名字为"Standard" )。

Photoshop设计网页定价表

  给文字图层设置平滑的阴影和灰色的颜色叠加效果,参数如下:

Photoshop设计网页定价表

Photoshop设计网页定价表

下一步,在计划名称的下方添加价格的明细部分(如下所示)。给该文字图层添加一个灰色颜色叠加和阴影效果。

Photoshop设计网页定价表

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消