萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps入門教程 >> PhotoShop打造簡潔的新聞欄目網頁設計制作教程

PhotoShop打造簡潔的新聞欄目網頁設計制作教程

  介紹用PhotoShop打造簡潔的新聞欄目網頁設計效果,比較簡潔的新聞欄目設計,喜歡網頁設計的同學可以一起來學習一下!

  效果:

PhotoShop打造簡潔的新聞欄目網頁設計制作教程 三聯教程

  制作開始:

  繪制一個矩形框。

按此在新窗口浏覽圖片

  給矩形框增加樣式:描邊。

按此在新窗口浏覽圖片

  在底部矩形上再繪制一個長形矩形。用來承載欄目名。

按此在新窗口浏覽圖片

  給這個載體矩形增加樣式。

  如:漸變疊加配合描邊與內發光。

按此在新窗口浏覽圖片

  每個邊緣細節,都要將畫布放大,像素化處理。

按此在新窗口浏覽圖片

  在欄目標題載體上寫上所需名稱及其他元素。

按此在新窗口浏覽圖片

  添加框架內的圖片展示區域。

按此在新窗口浏覽圖片

  添加標題與摘要展示。

按此在新窗口浏覽圖片

  所看見的初步樣式。

按此在新窗口浏覽圖片

  選擇鉛筆工具,展開畫筆工具欄。調整間距。

按此在新窗口浏覽圖片

  新建圖層。

按此在新窗口浏覽圖片

  按住Shift鍵在如下區域繪制一根點狀線。

按此在新窗口浏覽圖片

  需要更改點狀線的顏色是,增加顏色疊加即可。

按此在新窗口浏覽圖片

  選擇文本框工具繪制一個矩形文本框,並增加內容。

按此在新窗口浏覽圖片

  再新建一個圖層。

按此在新窗口浏覽圖片

  使用鉛筆繪制一個小方點。

按此在新窗口浏覽圖片

  並使用ctrl+j復制這個圖層。(當前我們三條文本鏈接,所以只需要三次)。

按此在新窗口浏覽圖片

  排列好頭尾標題點時,使用垂直自動排列工具。

按此在新窗口浏覽圖片

  最終增加元素及調整顏色所看見的效果。

按此在新窗口浏覽圖片
copyright © 萬盛學電腦網 all rights reserved