优艾设计网

利用PhotoShop制作网站内容框

利用PhotoShop制作网站内容框

在本例教程中我们将学习如何制作如下网页内容框。

利用PhotoShop制作网站内容框

1. 建立275像素 X 300像素 的画布。

2. 使用矩形工具绘制一矩形,图层 >> 图层样式 >> 渐变叠加。

利用PhotoShop制作网站内容框

3. 得到如下效果。

利用PhotoShop制作网站内容框

4. 添加“描边”效果。

利用PhotoShop制作网站内容框

5. 得到如下效果。

利用PhotoShop制作网站内容框

6. 按下 Ctrl 并点击矩形层获得选区,创建新的图层并填充颜色(#333333)。

利用PhotoShop制作网站内容框

7. 图层 >> 图层样式 >> 描边。位置“外部”,填充方式“渐变”。

利用PhotoShop制作网站内容框

8. 得到如下效果。

利用PhotoShop制作网站内容框

9. 创建新的图层,并绘制另一个矩形,图层 >> 图层样式 >> 渐变叠加。

利用PhotoShop制作网站内容框

10. 调整该矩形的位置和大小,得到如下效果。

利用PhotoShop制作网站内容框

11. 重复步骤 9。

利用PhotoShop制作网站内容框

12. 调整矩形位置和大小得到如下效果。

利用PhotoShop制作网站内容框

13. 绘制另一个矩形并填充颜色(#A2A3A7),图层 >> 图层样式 >> 内发光。

利用PhotoShop制作网站内容框

14. 调整矩形位置和大小得到如下效果。

利用PhotoShop制作网站内容框

15. 绘制最后一个矩形,图层 >> 图层样式 >> 渐变叠加。

利用PhotoShop制作网站内容框

16. 调整位置和大小得到如下效果。

利用PhotoShop制作网站内容框

17. 图层 >> 图层样式 >> 描边。位置“外部”,填充方式“渐变”。

利用PhotoShop制作网站内容框

18. 图层 >> 图层样式 >> 斜面和浮雕,样式“内斜面”。

利用PhotoShop制作网站内容框

19. 得到如下效果。

利用PhotoShop制作网站内容框

20. 栅格化图层,利用矩形选框工具建立如下选区。

利用PhotoShop制作网站内容框

21. 删除选区。

利用PhotoShop制作网站内容框

22. 输入文字信息,一个据有层次感的网站内容框就制作完成了。

利用PhotoShop制作网站内容框

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜