美文网首页设计努力
登录界面设计

登录界面设计

作者: hi武林高手 | 来源:发表于2018-10-30 15:38 被阅读248次

step 1

打开Photoshop CC软件,按【Ctrl+N】组合键,在“新建”对话框中设置“名称”为旅行记录界面设计、“宽度”为750像素、“高度”为1334像素、“分辨率”为72像素/英寸、“颜色模式”为RGB颜色、“背景内容”为白色,单击“确定”按钮,完成画布的新建

step 2

按【Ctrl+R】组合键调出标尺,建立如图参考线。其中,上面两部分的划分分别为状态栏(高40像素)和导航栏(高88像素)

step 3

打开素材文件“风景.jpg”和“状态栏.psd”,将其拖入到当前画布中,并将状态栏图层的混合模式设置为“滤色”

step 4

选中风景图形,执行“滤镜→模糊→高斯模糊”命令,调整模糊半径值为5.7

step 5

选择“横排文字工具”,输入导航文字,标题文字选用34像素,按钮文字选用32像素,字体均选用“苹方 中等”,颜色为白色

step 6

打开素材文件“头像.jpg”,将其拖入到当前画布中

step 7

选中头像所在的图层,点击“图层”面板中的“添加图层蒙版”按钮,创建图层蒙版, 选择“椭圆选框工具”,绘制一个圆形选区,按下【Ctrl+Shift+I】组合键进行反选。 创建选区

step 8

将前景色设置为黑色,按下【Alt+Delete】组合键,隐藏掉选区内的图形

step 9

选择“圆角矩形工具”,绘制一个宽550像素,高80像素的圆角矩形,圆角半径为40像素,填充浅绿色(RGB:166、216、208)

step 10

选择“椭圆工具” 结合“直接选择工具 ,绘制描边图形 ,并在圆角矩形内输入文字

step 11

选择“椭圆工具”,绘制选中状态的单选框,底色为白色正圆形,上方添加橘黄色(RGB:253、133、37)正圆形 ,采用上述同样的方法绘制未选中状态单选框,将橘黄色填充改为灰色(RGB:149、149、149)

step 12

重复Step09中的操作方法,绘制同样大小的圆角矩形,填充灰色,选择“横排文字工具”,输入按钮文字内容“登录”,颜色为深灰色(RGB:107、108、108)

最终效果
做完收工ctrl +s保存

相关文章

  • 无标题文章

    # 智能社区商超管理系统登陆界面设计文档 ### 一.登录 ### 1.登录界面图 ### 2.登录成功 ### ...

  • 登录界面设计

    界面的设计: 界面居中,不能改变大小: 默认角色收银员及代码: 用户名字符设置和密码星号设置: 对话框的设置: 退...

  • 登录界面设计

    1. 登录界面的效果图 4. 重要方法描述点击“取消”按钮退出登录界面 5.需要完善的功能可以添加验证码的设置,增...

  • 登录界面设计

    step 1 打开Photoshop CC软件,按【Ctrl+N】组合键,在“新建”对话框中设置“名称”为旅行记录...

  • 2018-10-21

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • 2018-10-21

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • 商超系统登陆界面 廖世豪

    一、登录界面设计 二、登录界面实现功能 三、登录界面各控件的参数设置 控件1 控件2 控件4 四、重要方法描述 角...

  • 2.2登录界面设计

    登录界面的制作 一.登陆界面、 (1).开始界面QQ图片20181014172144.png (2).输入界面密码...

  • 移动端UI界面设计之-注册登录

    原文地址:https://www.mockplus.cn/blog/post/999 注册登录是移动端UI界面设计...

  • 登录界面的设计

    登录界面设计 一.登录界面效果图截图 1.可进行登录界面 2.账号长度为9位内,密码显示为*号 3.默认用户类型为...

网友评论

    本文标题:登录界面设计

    本文链接:https://www.haomeiwen.com/subject/zoegtqtx.html