這次介紹的是筆記本類數(shù)碼科技公司網(wǎng)站界面的設(shè)計(jì)流程，整體來說這類網(wǎng)站都是走的簡(jiǎn)潔大方的設(shè)計(jì)風(fēng)格。

在photoshop中新建1000x960大小文件，白色背景，在網(wǎng)頁(yè)版面頭部制作兩條矩形，一條80px高，顏色#e9eacf，一條240px高度，顏色#62c0e6

使用選區(qū)工具劃分選區(qū)

為選區(qū)添加圖層樣式

再次選中如下選區(qū)

添加圖層樣式

完成后效果圖

在網(wǎng)站頭部下選中區(qū)域，進(jìn)行隨意顏色的填充

然后添加圖層樣式

為我們之前的所有漸變效果圖形增加量邊的立體邊框，用選區(qū)工具選中如下圖區(qū)域

填充黑色，然后使用"濾鏡>模糊>高斯模糊"，設(shè)置2px，將圖層不透明度設(shè)置為35%，去掉中間區(qū)塊，保留兩邊的黑色邊框線

使用鋼筆進(jìn)行弧線選區(qū)，如下

填充白色，設(shè)置圖層不透明度為5%

復(fù)制圖層一次，并向上移動(dòng)一定距離，并刪除藍(lán)色矩形外的圖形

再?gòu)?fù)制兩次圖層，進(jìn)行翻轉(zhuǎn)移動(dòng)等位置的調(diào)整，可以調(diào)出如下的效果圖

加入公司網(wǎng)站的LOGO標(biāo)志與導(dǎo)航文字

導(dǎo)入banner圖片

我們?yōu)楣P記本電腦圖片制作倒影，方式是先進(jìn)性圖片復(fù)制，然后調(diào)整不透明度，再將不需要的部分進(jìn)行剪切

加入一些其他元素，這里我們放入蝴蝶的圖片

放入公司網(wǎng)站的文字介紹

其他相對(duì)簡(jiǎn)單，無(wú)非是圖片與文字內(nèi)容的排版

完成后的公司網(wǎng)站整體效果如下，本文的網(wǎng)站設(shè)計(jì)風(fēng)格比較淡雅與樸素，主要適用與科技類公司網(wǎng)站