Photoshop绘制一个网页形式的公告板

作者:EVG 出处:UCD博客 Step 1. 打开photshop,文件-新建,新建一个文档(尺寸:600像素400px),背景内容为半透明 ngStep 2. 使用矩形工具 绘制一个大小为(280px:480px)的矩形, 提示:为了给一个固定的形状大小,访问选项栏面板 ngStep 3. 按ctrl+Enter 把路径转换为选

photoshop教程:锻造威风凛凛至酷龙盾(3)

10、背景已经完成了,可以适当调整“雾”层的透明度或色阶等内容改变雾的效果(可略)。 图10 进一步调整背景 11、下面我们来做剑,在以前六月海前辈曾经做过个“剑”的教程,小壁比较懒(谐音:小PIG,哈哈),搞

作者:EVG   出处:UCD博客

Photoshop绘制一个网页形式的公告板插图

Step 1.

打开photshop,文件-新建,新建一个文档(尺寸:600像素400px),背景内容为半透明

Photoshop绘制一个网页形式的公告板插图(1)

ng>Step 2.

使用矩形工具 Photoshop绘制一个网页形式的公告板插图(2)绘制一个大小为(280px:480px)的矩形,

提示:为了给一个固定的形状大小,访问选项栏面板

Photoshop绘制一个网页形式的公告板插图(3)

Photoshop绘制一个网页形式的公告板插图(4)

ng>Step 3.

按ctrl+Enter 把路径转换为选区,设置前景色为#a37d54 设置背景色为 #4e2f0d

为了产生corkboard纹理。转到滤镜“>渲染>云彩,

Photoshop绘制一个网页形式的公告板插图(5)

继续对;转到滤镜“>素描>便条纸(图片平衡:32,颗粒度:11和救济:12)。

Photoshop绘制一个网页形式的公告板插图(6)

Photoshop绘制一个网页形式的公告板插图(7)

转到滤镜“>笔触>飞溅(喷雾半径:15和平整度:10)。

Photoshop绘制一个网页形式的公告板插图(8)

Photoshop绘制一个网页形式的公告板插图(9)

最后,让我们给它一个较深的颜色,去图像“>调整”>影印/高光

Photoshop绘制一个网页形式的公告板插图(10)

Photoshop绘制一个网页形式的公告板插图(11)


ng>Step 4.

新建图层,使用圆角矩形工具尺寸为(由302px 502px)半径:10px

Photoshop绘制一个网页形式的公告板插图(12)

填充色为 #4e2f0d

Photoshop绘制一个网页形式的公告板插图(13)

ng>Step 5.

为了使每个边界两边看看真实的,我们要创造的角落之间的差距。

用多边形选框工具选中,剪裁4个边。并按Ctrl+X剪切并新建图层张贴

Photoshop绘制一个网页形式的公告板插图(14)

在为层的混合选项“边界的权利”,申请一个渐变叠加(角度:0度,第一梯度滑块:#e77d15,第二梯度滑块:#f69834)。

现在,层“边境顶”,适用于另一个渐变叠加(第一梯度滑块:#e77d15,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

接下来,层“边境左”,适用于另一个渐变叠加(第一梯度滑块:#0d550e,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

最后,层“边境底”,适用于另一个渐变叠加(第一梯度滑块:#6e3c0b,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

Photoshop绘制一个网页形式的公告板插图(15)

Photoshop绘制一个网页形式的公告板插图(16)

ng>Step 6.

新建图层,会只一个白色的正方形。 按cthrl+T变形

Photoshop绘制一个网页形式的公告板插图(17)

给该图层添加样式

Photoshop绘制一个网页形式的公告板插图(18)

选择渐变工具 前景色为#eae7e7 ,背景色为白色

Photoshop绘制一个网页形式的公告板插图(19)

Photoshop绘制一个网页形式的公告板插图(20)

ng>Step 7.

 绘制一个小圆,作为钉子的头

添加渐变样式

Photoshop绘制一个网页形式的公告板插图(21)

使用画笔工具Photoshop绘制一个网页形式的公告板插图(22),给钉子添加高光

Photoshop绘制一个网页形式的公告板插图(23)

添加投影

Photoshop绘制一个网页形式的公告板插图(24)

使用多边形套索工具,或者钢笔工具绘制形状

Photoshop绘制一个网页形式的公告板插图(25)

填充渐变Photoshop绘制一个网页形式的公告板插图(26) #373636 到透明的渐变

Photoshop绘制一个网页形式的公告板插图(27)

同样的方法继续制作

Photoshop绘制一个网页形式的公告板插图(28)

Step 8. 

制作小木尺

导入素材木头底纹。 使用圆角矩形,半径为10px

Photoshop绘制一个网页形式的公告板插图(29)

添加投影

Photoshop绘制一个网页形式的公告板插图(30)

Photoshop绘制一个网页形式的公告板插图(31)

为了让他看起来比较真实,我们使用画笔工具给尺子加上泥土和高光

Photoshop绘制一个网页形式的公告板插图(32)

使用画笔工具 选择44号画笔

Photoshop绘制一个网页形式的公告板插图(33)

减去多余的部分

Photoshop绘制一个网页形式的公告板插图(34)

使用钢笔工具绘制绳子

Photoshop绘制一个网页形式的公告板插图(35)

ng>Step 9.

绘制铅笔。 使用圆角矩形绘制一个长的圆角矩形

Photoshop绘制一个网页形式的公告板插图(36)

设置前景色为#f7e168 背景色为#dbc558 选择渐变工具,中的对称渐变Photoshop绘制一个网页形式的公告板插图(37)

Photoshop绘制一个网页形式的公告板插图(38)

按Delete键,清除用矩形选框工具选中的部分

Photoshop绘制一个网页形式的公告板插图(39)

绘制笔尖

Photoshop绘制一个网页形式的公告板插图(40)填充色为:(#9f6f4b ~ #be9a78)

使用直线工具Photoshop绘制一个网页形式的公告板插图(41)绘制笔芯

Photoshop绘制一个网页形式的公告板插图(42)

绘制形状添加渐变

Photoshop绘制一个网页形式的公告板插图(43)

渐变颜色为(#504f4d #ffffff #3f3e3d )

Photoshop绘制一个网页形式的公告板插图(44)

Photoshop绘制一个网页形式的公告板插图(45)

和尺子同样的方法使用钢笔工具绘制绳子

Photoshop绘制一个网页形式的公告板插图(46)

使用与那叫矩形工具,给铅笔添加高光,填充色为白色(#ffffff),羽化1像素

Photoshop绘制一个网页形式的公告板插图(47)

设置图层的不透明度为50%

Photoshop绘制一个网页形式的公告板插图(48)

Step 10.

添加背景图案

Photoshop绘制一个网页形式的公告板插图(49)

使用椭圆选框工具,羽化50像素,填充色为(#c3840c)

Photoshop绘制一个网页形式的公告板插图(50)

ng>Step 11.

导入素材图片。“欧式别墅”

Photoshop绘制一个网页形式的公告板插图(51)

按Ctrl+T 调整图像大小,旋转图像

Photoshop绘制一个网页形式的公告板插图(52)

变形

Photoshop绘制一个网页形式的公告板插图(53)

Photoshop绘制一个网页形式的公告板插图(54)

Photoshop绘制一个网页形式的公告板插图(55)

单击菜单栏中的滤镜>扭曲>海洋纹理

Photoshop绘制一个网页形式的公告板插图(56)

现在我们在跳着呢个下色相,单价图像>调整>色相\饱和度

Photoshop绘制一个网页形式的公告板插图(57)

Photoshop绘制一个网页形式的公告板插图(58)

添加投影

Photoshop绘制一个网页形式的公告板插图(59)

使用椭圆工具 ,减去多余的投影

Photoshop绘制一个网页形式的公告板插图(60)

使用模糊工具Photoshop绘制一个网页形式的公告板插图(61)羽化边缘

Photoshop绘制一个网页形式的公告板插图(62)

使用钢笔工具Photoshop绘制一个网页形式的公告板插图(63)绘制形状,填充白色,羽化5像素

Photoshop绘制一个网页形式的公告板插图(64)

J减去多余的部分

Photoshop绘制一个网页形式的公告板插图(65)

适当的给4个角都加上反光,最后我们就完成了 ^_^,

Photoshop绘制一个网页形式的公告板插图 

Photoshop绘制一个网页形式的公告板插图(67)
Photoshop绘制一个网页形式的公告板插图(68)
Photoshop绘制一个网页形式的公告板插图(69)作者:EVG   出处:UCD博客

Photoshop绘制一个网页形式的公告板插图

Step 1.

打开photshop,文件-新建,新建一个文档(尺寸:600像素400px),背景内容为半透明

Photoshop绘制一个网页形式的公告板插图(1)

ng>Step 2.

使用矩形工具 Photoshop绘制一个网页形式的公告板插图(2)绘制一个大小为(280px:480px)的矩形,

提示:为了给一个固定的形状大小,访问选项栏面板

Photoshop绘制一个网页形式的公告板插图(3)

Photoshop绘制一个网页形式的公告板插图(4)

ng>Step 3.

按ctrl+Enter 把路径转换为选区,设置前景色为#a37d54 设置背景色为 #4e2f0d

为了产生corkboard纹理。转到滤镜“>渲染>云彩,

Photoshop绘制一个网页形式的公告板插图(5)

继续对;转到滤镜“>素描>便条纸(图片平衡:32,颗粒度:11和救济:12)。

Photoshop绘制一个网页形式的公告板插图(6)

Photoshop绘制一个网页形式的公告板插图(7)

转到滤镜“>笔触>飞溅(喷雾半径:15和平整度:10)。

Photoshop绘制一个网页形式的公告板插图(8)

Photoshop绘制一个网页形式的公告板插图(9)

最后,让我们给它一个较深的颜色,去图像“>调整”>影印/高光

Photoshop绘制一个网页形式的公告板插图(10)

Photoshop绘制一个网页形式的公告板插图(11)


ng>Step 4.

新建图层,使用圆角矩形工具尺寸为(由302px 502px)半径:10px

Photoshop绘制一个网页形式的公告板插图(12)

填充色为 #4e2f0d

Photoshop绘制一个网页形式的公告板插图(13)

ng>Step 5.

为了使每个边界两边看看真实的,我们要创造的角落之间的差距。

用多边形选框工具选中,剪裁4个边。并按Ctrl+X剪切并新建图层张贴

Photoshop绘制一个网页形式的公告板插图(14)

在为层的混合选项“边界的权利”,申请一个渐变叠加(角度:0度,第一梯度滑块:#e77d15,第二梯度滑块:#f69834)。

现在,层“边境顶”,适用于另一个渐变叠加(第一梯度滑块:#e77d15,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

接下来,层“边境左”,适用于另一个渐变叠加(第一梯度滑块:#0d550e,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

最后,层“边境底”,适用于另一个渐变叠加(第一梯度滑块:#6e3c0b,第二梯度滑块:#f4942d,第三梯度滑块:#d16f04)。

Photoshop绘制一个网页形式的公告板插图(15)

Photoshop绘制一个网页形式的公告板插图(16)

ng>Step 6.

新建图层,会只一个白色的正方形。 按cthrl+T变形

Photoshop绘制一个网页形式的公告板插图(17)

给该图层添加样式

Photoshop绘制一个网页形式的公告板插图(18)

选择渐变工具 前景色为#eae7e7 ,背景色为白色

Photoshop绘制一个网页形式的公告板插图(19)

Photoshop绘制一个网页形式的公告板插图(20)

ng>Step 7.

 绘制一个小圆,作为钉子的头

添加渐变样式

Photoshop绘制一个网页形式的公告板插图(21)

使用画笔工具Photoshop绘制一个网页形式的公告板插图(22),给钉子添加高光

Photoshop绘制一个网页形式的公告板插图(23)

添加投影

Photoshop绘制一个网页形式的公告板插图(24)

使用多边形套索工具,或者钢笔工具绘制形状

Photoshop绘制一个网页形式的公告板插图(25)

填充渐变Photoshop绘制一个网页形式的公告板插图(26) #373636 到透明的渐变

Photoshop绘制一个网页形式的公告板插图(27)

同样的方法继续制作

Photoshop绘制一个网页形式的公告板插图(28)

Step 8. 

制作小木尺

导入素材木头底纹。 使用圆角矩形,半径为10px

Photoshop绘制一个网页形式的公告板插图(29)

添加投影

Photoshop绘制一个网页形式的公告板插图(30)

Photoshop绘制一个网页形式的公告板插图(31)

为了让他看起来比较真实,我们使用画笔工具给尺子加上泥土和高光

Photoshop绘制一个网页形式的公告板插图(32)

使用画笔工具 选择44号画笔

Photoshop绘制一个网页形式的公告板插图(33)

减去多余的部分

Photoshop绘制一个网页形式的公告板插图(34)

使用钢笔工具绘制绳子

Photoshop绘制一个网页形式的公告板插图(35)

ng>Step 9.

绘制铅笔。 使用圆角矩形绘制一个长的圆角矩形

Photoshop绘制一个网页形式的公告板插图(36)

设置前景色为#f7e168 背景色为#dbc558 选择渐变工具,中的对称渐变Photoshop绘制一个网页形式的公告板插图(37)

Photoshop绘制一个网页形式的公告板插图(38)

按Delete键,清除用矩形选框工具选中的部分

Photoshop绘制一个网页形式的公告板插图(39)

绘制笔尖

Photoshop绘制一个网页形式的公告板插图(40)填充色为:(#9f6f4b ~ #be9a78)

使用直线工具Photoshop绘制一个网页形式的公告板插图(41)绘制笔芯

Photoshop绘制一个网页形式的公告板插图(42)

绘制形状添加渐变

Photoshop绘制一个网页形式的公告板插图(43)

渐变颜色为(#504f4d #ffffff #3f3e3d )

Photoshop绘制一个网页形式的公告板插图(44)

Photoshop绘制一个网页形式的公告板插图(45)

和尺子同样的方法使用钢笔工具绘制绳子

Photoshop绘制一个网页形式的公告板插图(46)

使用与那叫矩形工具,给铅笔添加高光,填充色为白色(#ffffff),羽化1像素

Photoshop绘制一个网页形式的公告板插图(47)

设置图层的不透明度为50%

Photoshop绘制一个网页形式的公告板插图(48)

Step 10.

添加背景图案

Photoshop绘制一个网页形式的公告板插图(49)

使用椭圆选框工具,羽化50像素,填充色为(#c3840c)

Photoshop绘制一个网页形式的公告板插图(50)

ng>Step 11.

导入素材图片。“欧式别墅”

Photoshop绘制一个网页形式的公告板插图(51)

按Ctrl+T 调整图像大小,旋转图像

Photoshop绘制一个网页形式的公告板插图(52)

变形

Photoshop绘制一个网页形式的公告板插图(53)

Photoshop绘制一个网页形式的公告板插图(54)

Photoshop绘制一个网页形式的公告板插图(55)

单击菜单栏中的滤镜>扭曲>海洋纹理

Photoshop绘制一个网页形式的公告板插图(56)

现在我们在跳着呢个下色相,单价图像>调整>色相\饱和度

Photoshop绘制一个网页形式的公告板插图(57)

Photoshop绘制一个网页形式的公告板插图(58)

添加投影

Photoshop绘制一个网页形式的公告板插图(59)

使用椭圆工具 ,减去多余的投影

Photoshop绘制一个网页形式的公告板插图(60)

使用模糊工具Photoshop绘制一个网页形式的公告板插图(61)羽化边缘

Photoshop绘制一个网页形式的公告板插图(62)

使用钢笔工具Photoshop绘制一个网页形式的公告板插图(63)绘制形状,填充白色,羽化5像素

Photoshop绘制一个网页形式的公告板插图(64)

J减去多余的部分

Photoshop绘制一个网页形式的公告板插图(65)

适当的给4个角都加上反光,最后我们就完成了 ^_^,

Photoshop绘制一个网页形式的公告板插图 

Photoshop绘制一个网页形式的公告板插图(67)
Photoshop绘制一个网页形式的公告板插图(68)
Photoshop绘制一个网页形式的公告板插图(69)

作者: 791650988

为您推荐