请问上海时时乐
当前位置: 请问上海时时乐 > 设计教程 > 网页设计教程 > Photoshop设计时尚的个人作品网页界面

上海时时乐平台:Photoshop设计时尚的个人作品网页界面

请问上海时时乐 www.i7b7.com.cn 在本教程中我们将使用Photoshop CS6设计一个简单、干净、三列的作品集时间轴。在这个过程中,我们将着眼于自定义网格,排版样式,并利用不同的颜色和对比度实现我们想要的美感。

同学们可以从这个教程学习如何在一个页面平衡不同的元素,使整个设计富有韵律感与呼吸感??毂弦档耐强梢猿⑹哉庋故灸愕淖髌芳?。

先上效果图:

Photoshop设计时尚的个人作品网页界面

Step 1

创建新文件,参数如图:

Photoshop设计时尚的个人作品网页界面

Step 2

新建参考线,以便平衡视觉。位置:水平 60px,垂直分别是 20px,,50px,115px,230px,550px,570px,875px和1180px,这里推荐同学们使用神器「GuideGuide」,具体使用有劳移步:PS 参考线插件GUIDEGUIDE下载及使用说明,非常方便。

Photoshop设计时尚的个人作品网页界面

Step 3

为了保证我们的设计有序专业,我们先新建3个图层组,分别命名为:左侧栏、简介、作品。平常没关注规范的同学,优设哥特别向您和您所在的团队推荐《PS礼仪手册》!网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南。

Photoshop设计时尚的个人作品网页界面
Photoshop设计时尚的个人作品网页界面

准备工作就此完毕咯。

Step 4

侧边栏为我们展示联系方式、作导航,让我们来建设它吧。

选择矩形工具,前景色改为 #11171c,在左侧栏的图层组里画一个大小230x1320px的矩形,移到左侧边缘,紧贴着第四条参考线就对咯,如图:

Photoshop设计时尚的个人作品网页界面

Step 5

在左侧栏的图层组新建一个图层组,位置在矩形上边,命名为轮廓图。

然后利用椭圆工具,摁住Shift,绘制大小100x100px的圆形,移到左数第三条参考线的中间,上边紧贴水平参考线,如图:

Photoshop设计时尚的个人作品网页界面

Step 6

现在,请听指挥 ^_^ ,把电脑里最帅气最漂酿的头像找出来,拖进去,摁住Alt,单击圆形,作为剪切蒙版,然后移动调整到合适(看得到脸)的位置。

Photoshop设计时尚的个人作品网页界面

Step 7

改变前景色为 #FFFFFF,选择文字工具,选择安装好的字体,大小16pt,写上你的英文名,移动到距头像下25px的位置,确保在第三条参考线的中间。

Photoshop设计时尚的个人作品网页界面

Step 8

现在为自己添加点个人介绍吧,作者使用的字体大小14pt,距名字20px,这样界面看起来有呼吸感。

Photoshop设计时尚的个人作品网页界面

Step 9

棒极了,现在继续在左侧栏的图层组下新建一个图层组,命名为社交媒体。把素材里的图标拖进组里,双击图层,颜色叠加——选择白色。将图层样式复制到其他图标上。

Photoshop设计时尚的个人作品网页界面

图标间距调整为10px,整个图标的图层组距离 简介 20px

Photoshop设计时尚的个人作品网页界面

分享到: 
Photoshop制作透明大气的导航按钮
Photoshop设计电影导演工作室网站首页
  • 珠海市香洲区:以居民需求为导向的“议治相济” 2019-04-20
  • 【记者直击】花莲地震已确认有两名失踪人员被困同一地点 2019-04-19
  • 宁波本土手工匠人创作的青瓷作品“海曙楼青瓷盘”亮相 2019-04-15
  • 【政在回应】2017年10月地方领导留言板回复盘点·甘肃篇 2019-04-15
  • 江南醉的博客—强国博客—人民网 2019-04-08
  • 唐山一男子不满工资被拖欠雇工举斧杀死雇主 警方4天破案 2019-04-06
  • 库克最新采访:没兴趣竞选总统 将再花300亿造新园区 2019-03-30
  • 空调有异味是为什么 这是你可能忽略的健康隐患 2019-03-29
  • 国地税怎么又合并了呢 一般来看 这是种集中资源的举动 2019-03-29
  • 天津市侨商会完成换届选举工作 2019-03-26
  • 两会声音:经济高质量增长 改革措施要跟上 2019-03-26
  • 用剩豆渣做丸子 人人都爱吃起来就停不住嘴-美食资讯 2019-03-19
  • 新时代迎来新峰会(钟声) 2019-03-12
  • 【学习时刻】中央党校徐浩然:把“人民”二字镌刻在党的旗帜上 2019-03-12
  • 世界杯打破孤立预言,开启俄罗斯荣耀时刻,普京献词“地球盛会”——感受足球的力量……巩固世界和平,促进相互了解。 2019-03-07
  • 838| 757| 85| 701| 912| 850| 350| 549| 881| 589| 265| 964| 780| 121| 311|