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

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

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

        當前位置: 首頁 > 設計教程 > 網頁設計教程 > Photoshop設計移動APP應用類型網站

        Photoshop設計移動APP應用類型網站

        最終效果

        Photoshop設計移動APP應用類型網站

        教程所需素材

        所有素材打包下載:http://urlxf.qq.com/?JRbqE37

        第一步

        新建(Ctrl + N)一個 1200 x 1150 px,背景為:#FFFFFF的文檔。使用“矩形選擇工具”(M)畫一個 1200 x 220px的矩形框,然后填充顏色(此顏色不做固定要求)。

        Photoshop設計移動APP應用類型網站

        接下來,我們把剛剛創建的圖層命名為“header”。使用“圓角矩形工具”(U)并設置半徑為20px。

        Photoshop設計移動APP應用類型網站

        畫一個950 x 60px 的圓角矩形

        Photoshop設計移動APP應用類型網站

        命名圓角矩形圖層“Navigation“。重新選擇圓角矩形工具(U)然后在“Navigation“右上方再次拖出一個圓角矩形作為搜索框。把該層命名為 “Search”。

        Photoshop設計移動APP應用類型網站

        第二步

        選擇 “Header” 圖層 按照如下設置添加”圖層樣式“

        投影設置:不透明度:34%;角度:90度;距離:5px; 大小:5px;

        Photoshop設計移動APP應用類型網站

        漸變疊加

        Photoshop設計移動APP應用類型網站

        在“Header”圖層上方建立一個發光圖層并命名為“Header Glow”. 選擇 “Header”圖層并執行命令 “圖層 >載入選區”選擇 “漸變工具” (G) “鏡像漸變”. 如圖所示。

        Photoshop設計移動APP應用類型網站

        然后把剛剛設置的圖層透明度降低為“15%”

        Photoshop設計移動APP應用類型網站

        Photoshop設計透明質感的產品介紹頁面
        Photoshop設計簡潔大方的網頁UI

        熱門推薦

        亿客隆

        <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>