當前位置:首頁>ps實例教程>ps網頁設計>網頁模板>教程內容

Photoshop設計電腦公司網站模板(7)

來源:頁教學網 作者:admin 學習:6986人次

這次介紹的是筆記本類數碼科技公司網站界面的設計流程,整體來說這類網站都是走的簡潔大方的設計風格。

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

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

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



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

添加圖層樣式

完成后效果圖



在網站頭部下選中區(qū)域,進行隨意顏色的填充

然后添加圖層樣式

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

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



使用鋼筆進行弧線選區(qū),如下

填充白色,設置圖層不透明度為5%

復制圖層一次,并向上移動一定距離,并刪除藍色矩形外的圖形

再復制兩次圖層,進行翻轉移動等位置的調整,可以調出如下的效果圖

加入公司網站的LOGO標志與導航文字

導入banner圖片



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

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

放入公司網站的文字介紹



其他相對簡單,無非是圖片與文字內容的排版

完成后的公司網站整體效果如下,本文的網站設計風格比較淡雅與樸素,主要適用與科技類公司網站



學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!