首页 > 办公 > Photoshop > 正文

Photoshop打造超酷个性网站登录界面

2024-08-21 23:20:39
字体:
来源:转载
供稿:网友

废话少说,直接开始我们的教程(注:软件版本为photoshop cs3)。

首先是背景素材和人物素材。

手把手教你制作个性网站登录页面

手把手教你制作个性网站登录页面

|||

打开photoshop,创建新画布,大小根据个人网站需要而定,这里我们设置为900x650像素。

打开背景素材图,使用移动工具(v)将背景素材拖动到刚刚创建的画布中。

手把手教你制作个性网站登录页面

继续使用移动工具(v)调整素材图的位置直到满意为止。

手把手教你制作个性网站登录页面

创建灯光效果,选择素材层,滤镜 >> 渲染 >> 光照效果。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

|||

得到如下效果(注意调整光源位置):

手把手教你制作个性网站登录页面

使用矩形选框工具(m)建立如下选区。

手把手教你制作个性网站登录页面

创建新图层,并用白色填充选区。

手把手教你制作个性网站登录页面

|||

自由变换(ctrl + t),得到如下效果。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

 图层 >> 图层样式 >> 投影。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

复制图层并旋转得到如下效果。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

|||

按住ctrl键并在图层面板点击顶部矩形图层获得选区。

手把手教你制作个性网站登录页面

选择 >> 变换选区,按住alt键,缩小选区。

手把手教你制作个性网站登录页面

选择 >> 存储选区,将上述选区保存。

载入人物素材图片,并调整大小。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

|||

选择 >> 载入选区,将之前存储的选区载入,选择 >> 反选,删除。

手把手教你制作个性网站登录页面

新建图层,使用笔刷工具,并选择箭头笔刷,绘制如下效果。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

编辑 >> 变换 >> 变形。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

|||

输入登录提示文字“enter”。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

 

为文字层添加投影效果,图层 >> 图层样式 >> 投影。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

得到如下效果:

手把手教你制作个性网站登录页面

|||

自由变换(ctrl + t),调整文字层的位置及角度。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

输入网站版权申明文字。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

为版权申明文字设置图层样式。

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

|||

得到如下效果:

photoshop打造超酷个性网站登录界面_网页设计webjx.com在线转载

输入标题文字,并采用与“enter”层相同的图层样式。

手把手教你制作个性网站登录页面

最终效果如下,希望大家能够喜欢。

手把手教你制作个性网站登录页面

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表