IT軟件公司網(wǎng)站界面設計步驟解讀

1、IT軟件公司網(wǎng)站界面設計步驟解讀IT軟件公司網(wǎng)站界面設計步驟對于IT或軟件公司網(wǎng)站來說，清爽與專業(yè)是主要表現(xiàn)風格，雖然從表面上看這款網(wǎng)頁 界面并沒有什么花哨之處，但整體效果很不錯，這也軟件公司所要表現(xiàn)的主題十分貼切。創(chuàng)建文檔新建文檔，大小1200 x 1200像素,背景為白色.設置你的前景色為#d6d6d6背景色味#efefef然后選擇漸變工具設置線性漸變.28 / 25Qi File Edit Image Layer Select Filter Analysis View Window HelpH (JlDkJZlOMM; Normal Qptcty： 100% » E&V

2、E yjcLinear Gradient從畫布頂端開始拖動漸變，線性漸變大概有250 - 300像素.創(chuàng)建頁眉選擇矩形選區(qū)工具，拉出寬度跟畫布相同高度大概160-170像素的選區(qū).在填充選區(qū)之前設置你的前景色為#483f38背景色為#lel916.選擇漸變工具，這次 選擇對稱漸變.I File Edit Image Layer Select Filter Analysis View Window HelpEIQkJIQ Mode： NormalReflected GradientOpacity: 100% >'_ Reverse 叵在矩形的中間拉出對稱漸變.一旦你填充了矩形，點擊

3、“濾鏡 雜色添加雜色”為 它增加雜點.Q 100% QAmount: 0%QDistribution° Uniform, Gaussian0 Monochromatic創(chuàng)建模板題目使用橫向排版工具在矩形內(nèi)部加上網(wǎng)站的標題和*.YourProductYour Catchy Slogan Here接著為標題添加陰影使用下面設置.為標題的其中一個單詞添加漸變疊加.你將會看到.YourProdudYour Catchy Slogan Here創(chuàng)建小型的導航欄選擇圓角矩形工具,半徑設置為10px.在頁眉矩形的右側(cè)拉出小型的圓角矩形.口0。" 'VK胃 L 叵亙XCAi現(xiàn)在為你

4、的圓角矩形增加圖層樣式.Layer Style在矩形內(nèi)加入文字連接，看起來應該是這樣的.Home About Us Contact Us創(chuàng)建主要導航欄在你使用圓角矩形工具創(chuàng)建主要導航欄之前，先選擇矩形選區(qū)工具各增加一條高度為 1PX的線.在頂部的線顏色為黑色,底部的線顏色為黑色.放置兩條線在頁眉矩形的底部.ZOC使用圓角矩形工具拖出矩形，使矩形在頁面和背景的中央位置.Home Atxiut Us Contact UsYourProdu 1Your Catchy Here為你的導航增加以下樣式.Layer Style在主要導航里面新建一個圓角矩形.該矩形的顏色為白色,大小為主要矩形的一半或 者更

5、小.設置小矩形的透明度為5%.下一步你將要學會如何創(chuàng)建自定義圖案.新建25 x 25像素的文檔，放大之后選擇鉛筆工具.使用鉛筆工具，顏色為黑色臨基 以下圖片.當你創(chuàng)建好圖案選擇“編輯 > 定義圖案”，保存自定義圖案，命名為“對角線”.回到你原始的畫布然后載入主要導航矩形.你可以在圖層面板選擇圖層然后點擊，” 選擇載入選區(qū)”.當你載入選區(qū)之后新建圖層選擇油漆桶工具填充選區(qū)（不要忘記加油漆桶 選項設置為圖案）.最后將圖層的透明度設置為1%創(chuàng)建搜索框使用橫向排版工具增加導航項目組，在右邊我們將增加搜索框. 使用圓角矩形工具,半徑設置為5px在右側(cè)的空白處創(chuàng)建矩形.為搜索框增加圖層樣式.Laye

6、r StyleStylesBinding Optomi DefaultDrop Shadow£ Inner Shadow匚。uterGlow inner Glow Bevel and Emboss：8ntour：Texture SatinColor OverlayColorNormal |H#113dld2pdeM0 100 戔OKResetZ PreviewColor OverlayE Gradient GvertayPattern Overlay Straka在你的搜索區(qū)域加入文字和右側(cè)的小圖標.我從自定義圖案庫選擇了小型的放大鏡.創(chuàng)建焦點區(qū)域在主要導航的下面我們將創(chuàng)建焦點區(qū)域用

7、了展示產(chǎn)品.開始選擇文字工具增加漂亮的 標題和一段文字.Solutions Products Support Communtites Company StonLorem Ipsum Dolor Amet Sitlorem ipsum dolor sit amet, consectetur adipiscing slit. Suspendisse jgravida justo est. Sed variusr arcu eu ihendrerit facilisis, enim purus jviverra tellus7 vitae vestibulum lectus sem non mi.

8、Vivamus at urna hsusf tincidunt pharetra arcu. Donee orci sapiznmalesuada egestas jfeugiat congue, suscipiit dapibus metus.在文字的右側(cè)創(chuàng)建你的產(chǎn)品盒子.在本教程，我只需要一個空間的軟件圖片.你可以 花更多的時間去自定義你的軟件盒子，或者簡單使用以上提供的圖片.ipiscing elit. Suspendisse rerit factlisis, enirm purus non mi. Vivamus at urna pienr malesuada egestas»

9、;nsectetur adipiscing elit. Suspendisse arcu eu herdrerit faciilisis, enrm purus lectus sem non mi. Vivamus at urna ?onec orci sapien, malesuada egestas s metus.一旦添加好你的軟件盒子，復制它，將副本拖移到原始圖片后面.自由更改軟件盒子 的大小按下“CTRL + T"，調(diào)整副本通過一次或者兩次設置“濾鏡 模糊高斯模糊”，半 徑為1.最后復制軟件盒子副本重復上一步驟.你看起來應該是這樣的.scing elit. Suspendi

10、sse rit facilisis, enim purus n mi. Vivamus at urna malesuada egestas式.現(xiàn)在新建兩個小按鈕，選擇圓角矩形工具，半徑為10px.增加跟主導航同樣的圖層樣Lorem ipsum dolor sit consectetur adipiscing elit. Suspendisse gravida justo est. Sed varius, arcu eu hendrerit facilisisr enim purus viverra tellus, vitae vestibulum lectus sem non mi. Viva

11、mus at urna risus, tincidunt pharetra arcu. Donee orci sapien, malesuada egestas feugiat conguef suscipit dapibus metiis.為你兩個按鈕增加對角線花紋方法同上面導航部分.Lorem Ipsum Dolor Amet Sit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida justo est. Sed variusr arcu eu hendrerit facilisisr

12、enim purus vrv&rra tellusz vitae vestibulum lectus sem non mi. Vivamus at urna risusF tincidunt pharetra arcu. Donee orci sapien malesuada egestas feugiat congue, susciprt dapibus metus.創(chuàng)建分割線使用矩形工具各增加IPX的線，頂部線的顏色為#c9c9c9底部線的顏色為（#£££££力.#c9c90nfrfffr在兩條線下面增加選區(qū).Buy NowLear

13、n More設置前景色為加6e6e6背景色為昵fefef然后選擇線性漸變.向下拉出漸變.Buy NowDivider LineLearn MoreLinear Gradient我們現(xiàn)在需要混合2條線和漸變.我們加入了左，右兩方面的背景.增加一個蒙版，設置前景色為白色，背景色為黑色.選擇對稱漸變從元素的中間往左 右兩邊拉出漸變.你所選擇的元素應與背景的左右兩邊融合.為你的3個圖層進行設置,分別是頂部線，底部線和漸變.增加內(nèi)容在畫步的左邊,分割線的下邊新建3個圓角矩形.不需要太大,我們只是放置簡單的列 表.設置如下樣式.Layer StyleStylesGradient OverlayGradfe

14、ntBlending Options: DefaultDrop ShadowS Inner Shadow目 Outer GlovzInner Glow_ Bevel and Emboss口 Contou r口 Textu re SatinColor OverlayGradient OverlayPattern Overlay7 StrokeBfend Mode: NormalOpacity:Gradient: IStyle： LinearI ； 100%日 | Rev-srse 回 Align with LayerAngle;90Scale: .QGradient Editor0 Previe

15、w在圓角矩形里面增加綠色的小圓點，分割列表項目.Key Features- Lorem ipsum dolor sit ametz consectetur. Adipiscing elit. Suspend-isse gravida justo est.e Sed varius, arcu eu hen- drerit facilisis.e Enim purus viverra tellusr vitae vestibulum.盒子的右邊增加簡短的標題.在段落下而增加圖標，我使用"Classy Icon Set”來 自“Dryicons”.About Your ProductLorem ipsum dolor sit a met, consectetur adipiscing elit. Suspendisse gravida justo est. Sed variusr arcu eu hendrerit facilisis< enim purus viverra tellusr vitae vestibulum lectus sem non mi. Vivamus at urna risus, tincidunt pharetra arcu. Donee orci sa