《Photoshop设计简洁优雅的登录界面》由会员分享，可在线阅读，更多相关《Photoshop设计简洁优雅的登录界面（14页珍藏版）》请在金锄头文库上搜索。
1、Photoshop设计简洁优雅的登录界面教程旨在教大家使用Photoshop创建一个简单的登录界面。只需一些简单技巧，你也可以设计出一个漂亮 的登录界面。界面的背景色使用了几种不同的灰色色系，此举可最大程度保持整个界面的简洁和优雅。本教程简单易学，适合于初学者。HMICreate a Minimal Login Interface in Photoshop登录界面步骤1新建一个800 (H)x600 (W)像素的文档。当然也可根据自己的需求新建。接下来，使用圆角矩形工具(U) 建立一个320x210像素的圆角矩形，并用浅灰色(light gray)填充，以此作为整个登录界面的背景。步骤2Lye
2、r StyleStylesBlending Options: DeFaultDrop ShadowInner ShadowJ Outer 石lawInner GlowBevel and EmbossJ ContourTexture3 Satin21 Color Overlay21 石radient OverlayPattern Overlay0 StrokeBlend Mode!Opacity!Contours| Layer Knocks Out Drop ShadowNoise:Drop Shadow StructureDiEtance:QualityMake DefaultFeset to
3、 DeFault为登陆界面背景添加深灰色（#dbdada）投影，参数如下：投影（Drop shadow）：距离（dista nee）： lpx，大小（size）： lpx，混合模式（ble nd mode）设为正 片叠底（Multiply），不透明度（opacity）设为50%步骤3为背景应用大小为lpx的描边（stroke），描边的颜色与投影的颜色一致，即#dbdada。步骤4Lgyer StyleBltjriding Options: DeFaultDrop ShadowJ Outer GlowInner GlowBevel and Emboss21 ContourTextuPattern
4、 OverlayJ StrokeStylesInner ShadowGradient Overlay Gradient Color Overlay最后为背景增添渐变叠加(gradient overlay)的效果。颜色的渐变范围在白色(white)到非常浅的灰色 (#flflfl)之间。我们希望渐变叠加的效果看起来非常精细，不着痕迹，因此，不透明度应保持在60% 到65%之间。登陆界面的背景效果处理完毕，不过还需完善一下，添加lpx的细线可以使整个背景看起来不会太过空洞 细线的颜色与此前的应，除了灰色的细线，lpx的白色细线刚好放在灰色线之下。步骤6在登录背景的左上角写上” Login Form
5、”字样。写不写文字对PS布局并无大碍，倒是在实际的网站中更为 重要。文字采用深灰色，与背景色形成反差，突出强调效果。步骤7使用圆角矩形工具（U）创建两个白色形状，作为用户名和密码的输入框。为这两个形状应用描边样式， 大小lpx，颜色为#dbdada,在用户名的输入框中随便写一个电邮名，在密码输入栏中输入星标（*）。文 字字体采用Droid Sans,可在Google Fonts找到。步骤8Login Form在两个输入框中添加上小图标，提升用户友好度，方便用户找到对应的输入区。Login FormQ Remember my passward ack this session使用圆角矩形工具（U
6、）创建两个10x10像素的形状，接下来为他们描边，颜色为#dbdada。使用自定义 形状工具（U），从中选择打钩的图案放入形状的中央。Lgyer StyleStylesBlending Options: DefaultDrop ShadowInner Shadow21 Outer GlowInner GlowBevel and EmbossJ ContourTextureJ Satin21 Color Overlay21 Gradient Over layCarmelBlend Mode:Opacity:M R已m 已mber my password#6d6d6dDrop Shadow Str
7、ucturel：, J Use Global LightNew StylEH PrevieDiEtance:QualityContour:制作登录按钮，使用圆角矩形工具创建110 x 35像素的形状，并用颜色#6d6d6d填充。为登录按钮添加白 色投影，并将混合模式由正片叠加改为正常。Lyer StyleStylesBlending Options: DeFault0 Drop ShadowInner Shadow21 Outer GlowInner GlowBevel and EmbossJ ContourTextureJ Satin21 Color Overlay21 Gradient O
8、verlayBlend ModesOverlayOps 匚 ity:QualityInner Shadow Structure Remember my pass;vord Track this sessionDistance:Choke:Contour:给按钮添加内阴影（inner shadow），大小和阻塞（Choke）都设为0距离设为3像素，不透明度：30%, 混合模式：叠加（overlay ）。Position:ner ShadowE： end Mode:最终效果Structure Remember my password Track th is sessionL1| Layer StyleStrokeElendinq Options: DehauH回 Drop ShadowOuter GlowInner GlowBevel and Emboss ContoTexture_ Satin_ Color Overlay Gradient OverlayPattern Overlay最后给按钮添加颜色为#595656,Inside vNormalv.A100Opacity:Fill Types c：1=l|1=irH Previewhttp:/ http:/ http:/ http:/www.rkwater.org http:/ http:/
