本信息所属专题
更多
关联文章
热门标签
更多
您所在位置:首页  ›  影视百态  ›  娱乐搞笑

ps网页设计教程

青梅娱乐编辑于 2023-05-23 13:41:00

有时候我们会需要一个网页,那么怎么用ps设计呢?下面我就介绍一下。

创建新的 Photoshop文档。

点击单位和标尺,进行设置。

激活photoshop的标尺,从查看 > 标尺里头。按下"Ctrl/Cmd + R"固定标尺的可见度。按下M字键, 选择矩形选区工具在画布的左上角绘制出一个120px宽的小盒子。

移动选区到画布的右边缘,分配另外一条参考线到选区左侧。

创建logo创建新的组 (图层> 新建 >组)并且命名为logo。进入字符面板, 设置字体为Arial, 样式为粗体,大小为 42pt。 设置反锯齿选项为锐利颜色为#101112。

双击打开图层面板对话框. 选择图层渐变, 点击渐变设置如图。

选择水平排版工具在logo下面增加口号。

logo效果。

创建导航栏创建新组命名为navigation,置于 logo"组上方。 从顶部标尺拖出一条参考线, 直到距离画布顶端150px 的地方. 选择矩形工具(U)画出一直宽度为4px 的水平线,颜色为#e3ab27, 贯穿画布。增加导航链接文字,距离水平线 12px高距离左侧参考线 20px。 选择椭圆形工具画一个宽高分别为 72px *35px的矩形。 移动此图层到 "hover"下面. 使用转换点工具拉直底部圆角.。双击"hover"图层按钮打开图层样式对话框增加渐变颜色(左: #e5ad27, 右: #b27625)。选择横向排版工具(T), 选中文字, "Home" 更改颜色#ffffff (白色)。

创建联系我们选项将电话图标 置在接近右侧参考线的地方。图层命名为phone icon。 选择水平排版工具, 在图标左侧增加一个电话号码字体 Arial, 大小20pt 颜色#292929。 

新建页眉新建一个组,命名为header。选择矩形工具 (U) 新建矩形宽和高分别为1200px *440px。 移动此图行到矩形,导航栏1px的地方命名为header bg。 双击 header bg层, 选择渐变图层样式增加渐变颜色(左: #2e2226, 右: #7a7556)。

使用矩形工具新建一个新的矩形 (U) 大小为960px * 360px。移动到距离header bg层顶端40px,距离左边参考线0px的地方. 命名图层为header container。

创建特色项目选区。在header 组里面创建新组,命名为fp。选择矩形工具(U)创建大小为630px 乘以 340px , 距离header容器顶部和左侧10px的地方。给图层的颜色赋值为#000000 并命名为fp container。

从你的ps里导入一张图片放置在特色区域上面.,按选择 >全部 (Ctrl/Cmd + A), 然后 编辑 > 复制(Ctrl/Cmd + C)。 回到的网页设计。在fp container层上面新建图层,点 编辑> 粘贴 (Ctrl/Cmd + V) 粘贴你的特色项目图片。重命名为fp image ,右击fp image层选择剪切蒙版,现在图片只有在矩形区域可见。

进入 编辑> 变形>角度(Ctrl/Cmd + T).,从选项条, 点击旋转框,键入-4按下两次调整图层。 继续选择该图层。设置图层样式为亮度。

选择矩形工具(U)创建矩形大小为630px乘以 90px,颜色为#161718。改变图层不透明度为90% 命名为title bg。

标题设置字体: Arial, 颜色: #ffffff, 大小: 25pt自动反锯齿选项: 锐利描述设置:字体: Arial, 颜色: #a4a4a4, 大小: 12pt自动反锯齿选项: None

创建快速引用部分。 创建另外一个组在 header组内,并且命名为quick quote。选择椭圆形工具新建300px 乘以340px像素的矩形.。放置这个矩形到特色项目选区10px 的地方命名为qq container。复制之前制作的另外一个图层的样式.进入navigation"组, 右击hover层, 选择复制图层样式, 回到qq container"层,右击选择粘贴图层样式。

选择水平排版工具, 键入 Quick Quote在qq container"距离内容层顶部和左边 20px的地方。设置字体为Trebuchet MS 颜色为白色(#ffffff) 反锯齿选项设置为锐利。 使用椭圆形工具创建表单,选择椭圆形工具,设置半径为 3px。然后新建两个矩形大小为260px乘以 35px 颜色为白色 (#ffffff)。分别命名为 field1和field2,创建第三个矩形,大小为260px 乘以 75px 颜色为白色(#ffffff)命名为field3 ,使用文字工具分别写上各自标签。

选择椭圆形工具创建方型大小80px乘以35px命名为submit btn。双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框, 点击渐变编辑按照如下变更颜色 。

选择文字工具,键入Submit"使用字体Arial, 粗体样式 大小为13pt 选择submit 按钮 和 Submit 文字。在工具面板选择移动工具 在选项条设置水平居中和垂直居中。

创建新组命名为content, 选择椭圆形工具(U)。新建300px 乘以 175px 命名为c01。放置此层在距离头部30px 以下 距离左边参考线0px。双击层,设置如下样式。

选择文字工具增加文字, About SmashingDzine, 使用文章工具选择About文字,改变颜色为#b47825。选择Smashing文字,改变颜色为#2f2f2f, 增加简短描述和文字连接,参考以下设置。

增加多一个正方形, 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px。移动该矩形到距离左边矩形c01,10px 的地方,命名为border 设置描边如下。

创建另一个盒子,大小为82px 乘以 82px放置在border层中央 。命名为box 颜色改变为 #d5d5d5。选择content组的所有图层,进入图层> 新建> 创建组(Ctrl/Cmd + G) 命名为about。

复制about组 命名为services,再重新复制一组命名为portfopo,移动最后的组portfopo到右侧的参考线。

在面板选中三个组,点击图层>分布> 水平中心分布。

变更 services 组和portfopo组 如下。

新建组命名为footer 选择矩形工具(U)然后创建矩形大小为1200px 乘以100px 在我们布局的底部。命名为 footer bg,复制 header bg层的图层样式并且应用。

选择文字工具,写上版权声明文字,和链接,样式为Arial, 大小为12pt ,灰色(#dddddd)。

创建新组在footer层,命名为 subscribe。选择圆角椭圆形工具(U) 创建矩形大小85px 乘以 35px.图层命名为subscribe btn。选择文字工具,拼写Subscribe样式Arial,Bold大小13pt, 选择所有层。选择椭圆矩形工具 (U)设置半径为3px。创建椭圆矩形为210px 乘以35px 应用白色为主(#ffffff)命名该层为email field。完成。

本站提供的图片、视频和资源内容均来自于网络。所有图片和视频版权归原作者属有,如果本站无意中侵犯了您的权利,请与我们联系malanshan360@163.com。
娱乐搞笑其他文章
更多
多肉白牡丹怎么养
多肉白牡丹怎么养  白牡丹白牡丹有叫“白丽”的,为景天科风车草属的“胧月”与拟石莲花属的“静夜”的杂交品种,多年生肉质草本。植株生长较快,易生出分枝,形成群生株。叶子,倒...
1个月前
摆摊买气球 气球飞了
摆摊买气球气球飞了,真是快乐的一天
1个月前
关于昙花的传说
昙花的传说  昙花原是一位花神,她每天都开花,四季都灿烂。她还爱上了每天给她浇水除草的年轻人。后来此事给玉帝得知,玉帝于是大发雷霆要拆散鸳鸯。玉帝将花神抓了起来,把她贬...
1个月前
电动车带三个精神小妹
电动车带三个精神小妹,精神小妹都挺瘦的
1个月前
蔷薇花的养殖方法
蔷薇花养殖方法  1、土壤:蔷薇花对土壤的要求并不严格,耐干旱,耐瘠薄,栽培以在土层深厚、疏松、肥沃湿润且排水通畅的土壤中生长最为适宜,也可在粘重土壤上正常生长。无论是地...
1个月前
棒叶不死鸟怎么养
棒叶不死鸟为景天科伽蓝菜属多肉植物,别名落地生根,又叫不死鸟。下面醉花网结合花友的种植经验为大家介绍一下棒叶不死鸟的养护要点.棒叶不死鸟的茎直立,圆柱状,光滑无毛,中空。...
1个月前
查看更多娱乐搞笑栏目文章
精彩视频
查看更多精彩养眼视频
更多热图推荐
查看男人的福利
青梅娱乐版权所有,邮箱:malanshan360@163.com
苏ICP备19037501号-2