<dd id="rcs5i"><tr id="rcs5i"></tr></dd>
    <div id="rcs5i"></div>

    <div id="rcs5i"></div>

      1. <div id="rcs5i"></div>

        当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop设计时尚的个人作品网页界面

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

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

        同学们可以从这个教程学习如何在一个页面平衡不同的元素使整个设计富有?#19979;?#24863;与呼吸感快毕业的童鞋们可以尝试这样展示你的作品集哟

        先上效果图

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

        Step 1

        创建新文件参数如图

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

        Step 2

        新建参考线以便平衡视觉位置水平 60px垂直?#30452;?#26159; 20px,50px115px230px550px570px875px和1180px这里推荐同学们使用神器GuideGuide具体使用有劳移步PS 参考线插件GUIDEGUIDE下载及使用说明非常方便

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

        Step 3

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

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

        准备工作就此完毕咯

        Step 4

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

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

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

        Step 5

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

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

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

        Step 6

        现在请听?#23500;?^_^ 把电脑里最帅气最漂酿的头像?#39029;?#26469;拖进去摁住Alt单击圆形作为剪切蒙版然后移动调整到合适(看得到脸)的位置

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

        Step 7

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

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

        Step 8

        现在为自己添加点个人介绍吧作者使用的字体大小14pt距名字20px这样界面看起?#20174;?#21628;吸感

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

        Step 9

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

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

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

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

        分享到: 
        Photoshop制作?#35813;?#22823;气的导航按钮
        Photoshop设计电影导演工作室网站首页
        ڿ¡

        <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
          <div id="rcs5i"></div>

          <div id="rcs5i"></div>

            1. <div id="rcs5i"></div>

              <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
                <div id="rcs5i"></div>

                <div id="rcs5i"></div>

                  1. <div id="rcs5i"></div>