"網頁視覺設計"共有99篇文章

首頁  /  新知分享  /  網頁視覺設計

Photoshop【App修圖教學】PS Express色調調整

  今天astralweb要與大家分享如何PS Express色調調整,一起來看看如何製作吧! ※本教學使用版本Adobe PS Express ※本教學使用iPad為例   1.在PS Express中開啟要修改的圖片 2.點選下方的調整符號 3.在下方可選擇配置好的調整項目 4.選擇項目後再拖曳拉霸就可以調整修改的幅度囉   更多教學文章請參考 : Photoshop 教學導覽

邁向新時代,拓展新視野。歐斯瑞2017視覺設計

邁向新時代,拓展新視野。歐斯瑞2017視覺設計 感謝大家一直以來對歐斯瑞支持與肯定,歐斯瑞服務至今將邁入第十年,為因應時代需求,我們重新規劃了新的視覺形象,一起來看看我們的新標誌吧!   目的: 因應軟硬體進步下所衍伸的相關需求之設計 加強標誌對於設計應用上的多元性,提高品牌識別延伸製作時的自由度 增加企業標誌,更精簡的圖像視覺,改善原標誌複雜度及應用限制 融入品牌概念與企業精神於標誌之中   概念:

使用 NIPPON COLORS 在茫茫色彩中尋求一點靈感

  還在為了按鈕、文字,或是哪個區塊要用什麼顏色而煩惱嗎?顏色總是選了又選,換了又換,搞到最後都想叫保安!!保安!!這篇就要介紹一個不錯的配色工具網站給各位。   NIPPON COLORS-(日本の伝統色)是一個介紹各種日本自古以來,常會使用在不管是於文學上,還是手工藝等等地方的顏色代表(總共收錄250種)。讓你能夠更加的了解與認識如:桔梗、緋紅,琉璃等等這些神秘的顏色,不再需要藉由憑空想像。 在NIPPON COLORS裡,我們可以看到各個顏色的名稱與其對應的色碼(CMYK、RGB、HEX),當滑鼠指在RGB色碼上時,即會出現HEX的色碼編號可直接選取複製。

Photoshop【基礎修圖教學】增加立體感

今天astralweb要與大家分享使用加深加亮工具來增加照片立體感,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2017 ※本教學需先對工具使用有基本認識   有時候會因為光線關係,使得相片拍攝出來顯得較為扁平,但以亮度/對比調整也無法顯得有立體感時,我們可以使用加深加亮工具增加立體感   1.開啟想要修改的圖片 2.由於範例照片整體較亮,我們先做調整,選擇 影像>調整>亮度/對比   3.調整到需要的幅度整體暗一點   4.使用加深工具,範圍選擇中間調(可以需求選擇) 5.調整筆刷尺寸與曝光度

如何規劃最佳的商品圖片

商品圖片好壞是影響銷售關鍵因素之一,如何從規劃到完成一張好的商品圖片,透過圖片媒介傳達資訊來說服客戶。歐斯瑞今天與大家分享商品圖片的規劃到完成,一起來看看吧!   一、商品圖片好壞會影響你的銷售 商品圖片好壞是影響銷售關鍵因素之一,也是最先引起視覺注意的地方,是最直接、最迅速傳達您販售商品的途徑,特別是在網路販售平台,不同賣家販售著相似商品的情況下,消費者在瀏覽網頁時,要在短短的幾秒鐘決定要不要點選,而進入你的產品頁面來作更深入了解。  

Photoshop教學【攝影後製篇】後製瀑布照片長時間曝光

今天astralweb要與大家分享使用路徑模糊來將瀑布照片後製長時間曝光的效果,一起來看看吧! ※本教學須熟知基本工具使用 ※本教學使用Adobe CC 2017 1.開啟要修改的照片 2.概略框選出瀑布的範圍 3.將它複製出來,並先關閉背景 4.選擇 濾鏡 > 模糊收藏館 > 路徑模糊 5.此時會自動切換至 模糊工具 介面 6.預設會先拉好一條線,如果我們不需要可以按Delete刪除 7.在畫面中點擊出想要的路徑(結束時點擊兩下左鍵) 8.依需求增加其他路徑 9.依需求在右側視窗中調整模糊的程度 10.由於模糊的邊緣會被淡化,因此要先處裡淡化的地方

Photoshop教學【懶人修圖篇】消除雜訊

今天astralweb要與大家分享如何簡單消除雜訊,一起來看看吧!   內建所提供的消除雜訊方式可以快速達到,但建議使用解析度高的照片來製作,使用解析度較低照片修改照片失真會較為明顯。   1.開啟要修改的照片 2.選擇 濾鏡 > 雜訊 > 減少雜訊 3.此時會出現減少雜訊視窗 4.依照自己需求調整設定值 5.也有進階功能,可以針對不同色板做單獨的強弱調整 6.這樣就完成囉! 7.如果覺得還不夠強烈,可以再重複做一次

Photoshop【App修圖教學】PS Express裁切

Photoshop【App修圖教學】PS Express裁切 今天astralweb要與大家分享如何透過行動裝置使用PS Express來裁切照片,一起來看看吧! ※本教學使用版本Adobe PS Express ※本教學使用iPad為例   在PS Express中開啟要修改的圖片   點選下方的裁切符號     旋轉照片 如要90度旋轉照片可點選  將照片順時針或逆時針90度旋轉     翻轉照片 點選 將照片做鏡像水平翻轉或垂直翻轉       保持長寬比例

Magento 2 結帳流程的優化與設計準則

今天歐斯瑞要來談談Magento 2結帳流程頁面,相較Magento 1.9設計上有哪些優化呢?在設計時需要注意哪些事情? 一起來看看吧!   結帳頁面的重要性 好不容易讓客人進入到結帳頁,卻又因為繁瑣的步驟或是煩雜的畫面內容,增加了廢棄購物車的機會,別讓使用者在結帳的過程中增加負擔,進而影響了你的銷售,更多結帳頁設計技巧可以參考我們的文章「12個結帳頁面的設計技巧」。   Magento 2 的結帳頁更為優化 更簡化的步驟 將結帳步驟簡化至2步驟,對於使用者來做不必分成5步驟,即可完成結帳動作。   響應式設計更符合行動裝置 畢竟Magento

Photoshop教學【入門篇】仿油畫筆刷

今天要與大家分享,PS所提供可以用來製作油畫效果的工具,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2017 ※本教學需先對工具使用有基本認識   1.開啟要製作的照片 2.複製出新圖層,先製作大筆刷的區域 3.使用 藝術步驟紀錄筆刷工具 4.調整筆刷種類與大小(選擇較大筆刷) 5.在所有區域做繪製 6.再複製出第一個圖層(未做繪製的),並放置在最上方圖層 7.這次使用較小筆刷來做繪製 8.使用 橡皮擦工具 9.調整筆刷大小 10.擦拭出要顯現大筆刷區域,就完成囉 11.如果要更細緻可以再使用更細的筆刷做繪製 Photoshop 教學導覽

Photoshop【App修圖教學】PS Express

今天Astralweb要與大家分享PS Express的濾鏡,非常簡單喔,一起來看看如何製作吧!   基本的環境介紹可以參考:Photoshop【App修圖教學】PS Express基本介紹   1.開啟要修改的照片後,在下方工具列中選擇濾鏡     2.選擇想要的濾鏡模式後,可以在拉霸中調整濾鏡的強弱     3.如果我們要用兩種濾鏡效果,可以先將照片存檔     4.再用APP開啟我們剛剛儲存的照片     5.選擇另一個濾鏡並調整強弱    

Photoshop【App修圖教學】PS Express基本介紹

今天Aastralweb要與大家分享PS Express基本環境介紹,對於行動裝置使用者方便的修圖軟體,一起來看看吧!   PS Express提供一個較快速裁切照片、基本濾鏡、色調調整、除紅眼、基本邊框效果以及消除污點的工具,屬於較簡易且快速的基本修圖工具。使用APP前要先登入你的Adobe帳號,或免費創建一個帳號,進入畫面後在左側選擇你的圖片來源,在右側會顯示該來源內的資料夾與圖片。 【上方工具列】 復原上一步 重做下一步 自動增強: 會自動加強對比、亮度等,自動修圖 檢視原始: 點擊時可以檢視原始照片效果 使用其他應用程式修圖: 由於PS

Photoshop教學:【基礎應用】修改大量圖檔尺寸與壓縮

  Photoshop教學:【基礎應用】修改大量圖檔尺寸與壓縮 今天astralweb要與大家分享如何整批修改大量圖檔的尺寸,可以省去相當多的時間,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學需先對工具使用有基本認識   1.將需要改變尺寸的檔案存放在同一資料夾內   2.選擇 檔案 > 指令碼 > 影像處理器 3. 影像處理器的視窗分成4步驟來設定 第1步 先選擇來源,也就是要處理的資料夾 第2步 再選擇儲存的地方 第3步 選擇儲存的類型與壓縮程度以及是否需要調整尺寸大小 第4步

Photoshop教學:【入門篇】馬賽克濾鏡

今天astralweb要與大家分享使用馬賽克濾鏡,有時需要將圖片中較隱密的地方隱藏起來,但還是會希望看的出來有東西也不至於太突兀,就可以使用馬賽克濾鏡喔,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學需先對工具使用有基本認識   1.開啟需要修改的圖片 2.使用 矩形選取畫面工具 3.框選圖片中要馬賽克的區域 4.如有其他區域的話,按著Shift再框選即可 5.選擇 濾鏡 > 像素 > 馬賽克 6.然後調整馬賽克的程度

Photoshop App【Mix / Fix / PS Express / Adobe Sketch】概觀

Photoshop App【Mix / Fix / PS Express / Adobe Sketch】 出門在外只有手機或平板,卻又需要比較強大又免費的修圖軟體,Adobe推出一系列好用的App,一起來看看吧! ※教學對Photoshop工具使用有基本認識者尤佳 ※平板與手機板APP差異不大,而本教學使用平板   我們外出時會拍照打卡,時常用到修圖軟體,而有時會需要像PS較進階的功能,但手邊卻只有手機或平板,就可以考慮使用Adobe釋出的App來做修圖,Astralweb未來會提供一系列Photoshop App教學帶給大家認識。 基本上Adobe

Photoshop教學:【Camera Raw】變形修正-2

之前與大家分享過Camera Raw變形修正的工具,今天astralweb要與大家分享此工具對不同範例的應用,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學使用版本Adobe Camera Raw 9.6 ※本教學需先對工具使用有基本認識     1.將RAW檔案直接拖拉進去,如果是圖檔要開啟Camera Raw要到偏好設定裡先做設定     2.使用變形工具     3.在左側沿著大樓拉出一條線     4.在右側一樣沿著大樓拉出一條線  

Google Web Designer教學-視覺化設計開發速成工具

有鑑於行動裝置蓬勃地發展,以致於在提供跨平台使用特性上也相對地變得很重要,像是是設計廣告、網頁製作、網頁動畫等,Google推出的這款網頁設計工具你不能不知道,或許有很多人聽過但沒使用過,今天就來教學Google Web Designer這個工具吧!   哪裡下載Google Web Designer呢? 在Google Web Designer官網,點擊”Download Web Designer Beta”下載並安裝,安裝完後就可以開始設計囉。 Google Web Designer 切換中文版

Photoshop教學:【camera raw】調整曝光過度

今天astralweb要與大家分享使用Camera Raw調整些微曝光過度的問題,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學使用版本Adobe Camera Raw 9.6 ※本教學需先對工具使用有基本認識 Camera Raw雖然可以調整過度的部分,但是太嚴重的曝光是沒有辦法救的喔,因此基本的攝影技巧還是要有的,而以Camera Raw來做為輔助工具。 1.在Photoshop中的camera raw開啟要調整的照片     2.在白平衡中選擇合適的選項或手動調整色溫和色調   3.降低一些曝光度的數值

Photoshop教學:【Camera Raw】合併為全景照

Photoshop教學:【Camera Raw】合併為全景照 今天astralweb要與大家分享Camera Raw合併為全景照片的功能,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學使用版本Adobe Camera Raw 9.6 ※本教學需先對工具使用有基本認識   使用Camera Raw來合併全景照片,合併的照片也較為精緻,完成後並可以使用Camera Raw來做修圖,但相對運算時間可能會較久,可以依需求選擇是否使用Camera Raw來合併全景照。   1.將連續的Raw照片拖曳至PS內  

YOUTUBE品牌浮水印實作教學

YOUTUBE品牌浮水印實作教學 YOUTUBE提供品牌浮水印功能有好一段時間了,它可以在您所有影片的右下方,加上屬於您的LOGO或圖形,而我們在製作這樣的圖片時需要考量以及注意些什麼呢? 一起來看看吧!   關於YOUTUBE品牌浮水印 使用者可以上傳屬於您的LOGO或圖形,將呈現在你所有影片中的右下角,在滑鼠滑入時圖片左側會展開訂閱頻道的小視窗,使用者即可點擊按鈕來訂閱你的頻道。在格式方面,官方提供的規格為:png 或 gif 檔,檔案大小需小於1Mb。  

Photoshop教學:【Camera Raw】透視修正

Photoshop教學:【Camera Raw】透視修正 今天astralweb要與大家分享使用Photoshop CC Camera Raw來修正拍照時的透視,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015.5 ※本教學使用版本Adobe Camera Raw 9.6 ※本教學需先對工具使用有基本認識   1.將RAW檔直接拖拉進去,如果是圖檔要開啟Camera Raw要到偏好設定裡先做設定     2.這是一張透視變形的照片,我們要將大樓修成沒有變形的樣子     3.我們使用變形工具  

購物網站設計趨勢(四):輕鬆找到商品,選單就是篩選器!

歐斯瑞今天要與大家談談有關網頁選單結合篩選器,並分享一些案例,看看他們快速找到商品的方式,一起來看看吧! 當商品到達一定數量或商品類型不同時,就會需要將商品作分類,讓使用者可以依照分類來選擇,商品篩選器可以幫使用者繼續過濾當下不想要的商品,也就是透過一層層分類,來選出想要的商品。根據不同的商品數量、類型和客戶群等,所制定的分類方式與所使用的篩選器也就有所不同,要注意讓使用者的操作過程越輕鬆,越能讓你的商品賣出去!我們在前面文章中提過關於選單設計趨勢的多樣性,以設計的角度來看,選單的選擇方式其實就是一種篩選機制,今天先從幾個選單與篩選結合的案例作分享,看看這些品牌利用選單達到篩選的效果。

Photoshop教學【入門篇】PS的取代文字與檢查拼字

相信大家都使用過Word裡的取代文字的功能吧!其實Photoshop也有取代文字功能喔!當我們做好畫面時也可以使用這個修改喔,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識     開啟我們製作好的檔案 選擇 編輯>尋找與取代文字 此時會出現設定視窗 可以輸入要尋找的目標和要更改的文字

如何設計 Magento佈景主題 (2) – 使用sass開發

上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了,今天來談談如何使用sass來開發 Magento佈景 主題。在開發magento前請先安裝sass+Compass,還沒安裝sass的朋友,可以參考http://blog.shihshih.com/installing-the-sass-and-compass 監控magento專案 接下來我們就要來使用compass來監控這個新的佈景主題。 在上一篇的教學文章中、我們在rwd底下新增了一個study的資料夾。現在我們要複製了rwd > dufalt資料夾裡的所有內容到study資料夾裡。 rwd >

如何設計 Magento佈景主題 (1) – 開發前的準備動作

歐斯瑞準備了一系列「如何開發 Magento佈景主題 」的文章,這一篇文章首先要帶著大家一起進行正式開發前的第一步 ー 建立一個新的Store View。在接下來的示範中、我們要新增一個名為study的Store View。 如何設計 Magento佈景主題 (1) – 開發前的準備動作 首先我們需要建立二個資料夾 app/design/frontend/my_interface/my_theme/ 這個資料夾包含layout、templates 還有翻譯的語言文件 skin/frontend/my_interface/my_theme/ 這個資料夾包含css,

Photoshop教學:【基礎篇】製作燈塔投射光效果

今天astralweb要與大家分享使用Photoshop CC 2015來製作投射光效果,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   1. 置入要修改的照片 2. 先將照片修暗,調整 亮度/對比 3. 調整 色彩平衡 4. 調整 色相/飽和度 5. 複製燈塔中發光的區域 6. 調高亮度與色彩平衡 7. 使用橡皮擦將邊緣修飾 8. 複製出相同圖層,製做更亮的區域 9. 調高亮度/對比 10. 使用橡皮擦修飾 11. 複製剛剛做好的圖層,來做光暈部份 12. 將兩圖層合併 13. 使用高斯模糊 14.

Photoshop 教學【CC 影片編輯】影片色調漸變

今天astralweb要與大家分享使用Photoshop的透明度概念來做影片色調轉換,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   開啟動態頁面 置入影片 將影片拉出視訊群組 複製影片圖層 使用圖層色彩平衡調整顏色 將他放在要被套用的圖層上方 使用建立剪裁遮色片 再使用圖層色彩平衡調整成不同顏色 一樣將他放在要被套用的圖層上方 使用建立剪裁遮色片 然後將兩組影片分別放入圖層資料夾中 對上層的影片資料夾,展開圖層資料夾在時間軸上的選項,並點擊不透明度的計時器圖示,此時已記錄不透明度為100

Photoshop 教學【CC 影片編輯】影片遮罩效果

今天astralweb要與大家分享使用Photoshop CC 2015來做影片遮罩效果,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   開啟動態頁面 並置入影片 先將影片做剪接 調整影片的色調 將色調圖層對影片 使用建立剪裁遮色片 將需要顯現的圖像置入 將影片與色調圖層 轉換為智慧型物件 將影片對顯現的圖像使用建立剪裁遮色片 就會產生影片遮罩效果 最後加上背景就完成囉   本教學文章為歐斯瑞公司製作,如果您有任何問題,歡迎您聯繫我們,我們將盡力為您解答,謝謝。

使用bootply測試您的Bootstrap 網頁

您正在學習 Bootstrap 嗎?或是需要測試某個 Bootstrap javascript 的功能。您可以試試bootply。 bootply是一個線上編輯器,直接內建了jQuery、Bootstrap,還可以選擇是否要載入一些常用的外掛,例如:FontAwesome, jQuery UI…。您可以直接在bootply編輯您的bootstrap頁面,做一些測試,省略建立bootstrap環境的步驟及節省一些時間。 註冊一個新的bootply帳號 點擊Login 展開登入畫面   點擊New User? Sign-up..展開註冊新帳號畫面  

Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

這篇文章要跟你分享幾個使用Bootstrap的小技巧 包括: 移除換頁的箭頭及按鈕 改變幻燈片停留的時間 關閉自動輪播 關閉輪播暫停 關閉自動開始播放 之前我們在當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕這篇文章中分享了如何在判斷只有一張圖片的時候隱藏Bootstrap Carousel 的箭頭和按鈕的技計。但是、如果你只是單純的希望移除換頁的箭頭及換鈕的話,只要移除相關的html標籤就可以了。 移除換頁的箭頭及按鈕 <div id="carousel-example-generic" class="carousel slide"

Photoshop教學:【CC好好用】響應式設計好幫手Device Preview

在設計響應式設計時,我們會需要放在裝置上來看看實際上的大小是否合適,而Photoshop CC 提供一個在裝置上即時預覽功能,一起來看看吧! 1.           首先手機下載Adobe Preview CC 的app   2.          下載後並在手機上打開 3.          在電腦上開啟您製作的手機或平板設計檔 4.          選擇 視窗>Device Preview 5.          此時會開啟Device Preview視窗,但尚未與手機連線 6.          點擊檢查裝置 7.        

Photoshop教學【CC 影片編輯】分割影片

今天astralweb要與大家分享使用Photoshop CC 2015來做分割影片,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   開啟動態頁面 置入影片 將時間拉霸移動到要裁切的時間點 點擊時間軸上的分割圖示 就會將此影片切割開來 依此方式切割掉不要的片段就完成囉

當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕

現今有許多網站都會使用輪播圖片的方式來傳達訊息,網頁瀏覽者也可自行左右移動圖片,但如果在圖片只有一張的情況下,多餘的箭頭或按鈕只會混淆瀏覽者,這時候我們就可以將他們隱藏起來。 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel"

設計網站時,你是否考量過Ad Blockers的情況?

Smashing Magazine統計指出,有75%使用者都安裝了廣告阻檔軟體(Ad Blockers) 當你網站使用廣告區塊,卻被阻擋掉時,是否考慮過畫面會變成怎麼樣呢? 嚴重的可是會讓整個網頁版面跑掉喔。 由於現今有許多提供資訊的網站,免費讓讀者接收知識,這些網站會需要藉由廣告區塊來增加收入,但由於廣告的濫用導致使用者反感度大增,讓廣告阻檔軟體安裝量不斷攀升,根據Smashing

Photoshop教學【CC 影片編輯】圖層樣式動畫

今天astralweb要與大家分享使用Photoshop CC 2015做圖層樣式的動畫,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   1. 開啟動態介面   2. 開啟我們要的視訊規格   3. 點選建立視訊時間軸   4. 此時時間軸上有個圖層1,是原本的背景   5. 我們可以直接增加物件   6. 然後開啟該物件的圖層樣式   7. 對圖層樣式做設定   8.

Photoshop教學:【影片編輯】透明度動畫

今天astralweb要與大家分享使用Photoshop CC 2015製作透明度動畫,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1. 開啟動態介面   2. 置入要製作的影片   3. 置入要做透明度的圖片   4. 將它拉出視訊群組資料夾圖層   5. 在時間軸上調整位置   6. 將時間長度做修改   7. 展開時間軸中的選項   8. 點選不透明度前的”計時器圖示”   9.

在行動裝置上避免點擊輸入框時畫面放大

您有沒有遇過這樣的情況:當使用手機瀏覽網頁時,點擊輸入框準備輸入文字時,畫面放大了。若是不希望畫面放大該怎麼做呢? Astralweb在這邊提供您二個作法。 使用meta tag 禁止畫面縮放 在<head>標籤內輸入 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 使用方法不止點擊輸入框時畫面不會放大,就連其他的畫面縮放功能也一併禁止了。   幫輸入框設定字級 使用CSS幫輸入框設定字級

如何解決網站圖片在iPad和iPhone上方向不正確的問題

您有沒有遇過這樣的情況、上傳到網站的照片明明在各種裝置都能正常顯示、偏偏在iPad和iPhone上就是倒的。 當我們使用數位裝置拍攝照片時、會同時在圖片中存入EXIF資訊、其中包含了相機的製造商及型號、快門光圈、照片的方向等。之所以會有照片只在iPad和iPhone上倒置的情況出現、原因就是因為在判斷照片方向性的這個資訊上,Apple的裝置和其他裝置得到了不一樣的結果。最簡單的解決方法就是先清除掉照片的EXIF資訊再上傳。  

SASS: 如何幫產生的css指定編碼為UTF-8

font-family: Arial, '微軟正黑體'; 如果您的css檔案跟上面一樣使用了「中文名稱」字型,為了讓瀏覽器正確辨識字型名稱,我們必須要在css檔案的最前面指定編碼為UTF-8編碼   @charset "UTF-8"; 那在使用sass時要怎麼幫產生的css設定編碼呢? 只要打開專案設定檔config.rb,加上底下這一行設定、再重新compass watch就可以了   Encoding.default_external = 'utf-8' 只要加上這一行、就會讓sass產生的css檔案最前面出現@charset

購物網站設計趨勢(三)-手機版網頁首頁設計

我們之前談過手機購物網頁設計的趨勢與重要性,今天歐斯瑞要談談手機版的購物網站首頁設計,並分享一些案例,一起來看看吧! 現今設計趨勢   頁首高度縮小,並將頁首或選單保持在畫面上方 由於手機版的空間較狹小,使用者在瀏覽網站時,當下會花較多時間在於網站內容,而不是頁首,我們要盡量空出空間來呈現內容,但頁首確是相當重要基本元素,它是你的招牌、也是引導客戶的工具列,使用者會很需要它,但不能變成影響瀏覽的阻礙,因此設計的高度不宜太高,且保持在畫面上,讓使用者可以隨時操作頁首的選單與功能。   標誌、選單、購物車、搜尋是必要元素

Photoshop教學【CC 影片編輯】調整影片色調

調整影片色調-影片編輯 今天astralweb要與大家分享使用Photoshop CC 2015作影片色調的修改,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.開啟動態介面 2.置入影片 3.選擇圖層視窗下的建立新填色或調整圖層 4.我們可以選擇色相/飽和度 5.調整到我們要的程度 6.也可以選擇色彩平衡 7.一樣調整到我們要的程度 8.再選擇亮度/對比 9.一樣調整到我們要的程度 10.完成   ※對影片色調做修改時,必須在圖層做設定,不然只會修改到影片中的一個影格 Photoshop 教學導覽

Photoshop教學【CC 影片編輯】調整影片尺寸

今天astralweb要與大家分享使用Photoshop CC 2015做調整影片尺寸的修改,一起來看看如何製作吧!   ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 開啟動態介面 將影片置入 選擇 影像>影像尺寸 輸入需要的尺寸(建議等比例縮小) 選擇 轉換 完成  Photoshop 教學導覽

Photoshop教學【CC 影片編輯】調整影片速度

今天astralweb要與大家分享使用Photoshop CC 2015來調整影片速度,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 開啟動態介面 置入要修改的影片 在時間軸上對著影片按右鍵 在速度欄位中填入百分比數值,200%=時間快2倍,50%=時間縮短一半 數值區間限定在25%至400% 這樣就完成囉! 另外可以在持續時間欄位輸入數值來控制影片長度 更多相關文章: Photoshop

Photoshop教學【CC 影片編輯】將影片加入音訊

今天astralweb要與大家分享使用Photoshop CC 2015在影片中加入音訊,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   置入影片檔,並選擇動態介面 在時間軸下方的音軌列中,點擊音樂符號後,選擇 新增音訊(如果要增加更多音訊,可以新增更多的音軌) 選擇音訊檔後,就完成在音軌上增加了音訊 可以對著音訊的時間軸上點擊右鍵,來做簡單的編輯 如果影片本身有聲音,一樣可以對著影片點擊右鍵來關閉聲音 檔案>轉存>演算視訊 依照需求存輸出影片檔就完成 Photoshop 教學導覽

Photoshop教學:【CC 好好用篇】內建快速光源效果

今天astralweb要與大家分享使用Photoshop CC 2015內建反光效果來快速製作陽光效果,可以幫我們省去很多時間,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.打開要修改的照片 2.選擇 濾鏡>演算上色>反光效果 3.此時會出現設定視窗,我們可以點擊預覽畫面來選擇光源的位置 下方可以設定亮度與鏡頭類型 4.完成 更多教學文章請看:Photoshop 教學導覽

Photoshop教學【CC 影片編輯】開啟檔案與儲存影片

今天astralweb要與大家分享使用Photoshop CC 2015作一些簡單的影片剪輯,在做簡單的影片編輯時,可以考慮使用PS編輯,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.我們可以在右上角切換成動態介面 2.此時會開啟預設動態介面,可以自己需求在視窗選項中開啟需要的視窗 3.我們開啟一個新檔案,文件類型選擇影片和視訊 4.依需求選擇我們的尺寸 5.在時間軸上選擇建立視訊時間軸 6.可以將我們的影片拖曳至畫面上開始編輯 7.完成檔案後,選擇 檔案>轉存>演算視訊 8.依需求儲存就完成囉

Photoshop教學:【CC 好好用篇】後製星軌效果

今天astralweb要與大家分享使用Photoshop CC 2015內建迴轉模糊來製作星軌效果,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.開啟要製作的檔案 2.框選出天空的部份 3.複製一個天空圖層 4.先做沒有星星的天空當背景,選擇 濾鏡>模糊>高斯模糊 5.對著另一個有星星的圖層,選擇 影像>調整>曲線 6.我們利用黑色滴管吸取底色部份 7.選擇 影像>調整>亮度與對比,加強星星與背景的落差 8.選擇 濾鏡>模糊收藏館>迴轉模糊

Photoshop教學:【繪圖實戰篇】內建樹木繪製

今天astralweb要與大家分享使用Photoshop CC 2015內建樹木的應用,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.打開要製作的照片 2.新增一個空白圖層 3.選擇 濾鏡>演算上色>樹 4.此時會開啟設定視窗 5.先選擇樹的種類,設定基本內容 6.然後在進階部份可以設訂傾斜角度 7.確定後會將樹的圖像產生在剛剛建立的空白圖層上 8.將它縮放至我們要的位置 9.複製一個樹來做陰影 10.將它調成黑色 11.使用變形 12.複製一個並旋轉貼齊 13.將它調整到樹的下方

Photoshop教學:【繪圖實戰篇】內建火焰效果

今天astralweb要與大家分享使用Photoshop CC 2015內建火焰的應用,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 打開要製作的照片 使用筆型工具 然後選擇 路徑 建立新圖層在上面繪製 繪製出要產生火焰的地方 選擇 濾鏡>演算上色>火焰 此時會開啟火焰的設定視窗,先選擇火焰類型   可以調整基本與進階的內容到我們理想的狀況 然後選擇濾色濾鏡 使用指尖工具細修 再複製一個火焰,使用變形調整 完成   更多教學文章:Photoshop

Photoshop教學:【合成實戰篇】煙霧特效合成

今天astralweb要與大家分享人像與煙霧合成的特效,可以用在一些視覺效果上,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 1.準備人像與煙霧素材 2.打開人像圖片 3.置入煙霧素材 4.先將它點陣化 5.選擇 影像>調整>去除飽和度 6.然後再複製一張後,選擇 影像>調整>負片效果 7.我們對著黑底白煙的素材選擇 濾色濾鏡 8.對著白底黑煙的素材選擇 色彩增值濾鏡 9.此時會得到兩種素材 10.先將黑煙作調整 11.然後擺放在我們要的位置 12.再來調整並放置白煙 13.最後使用指尖工具 14.塗抹煙霧與人像,作細部修正就完成囉

Photoshop:【合成實戰篇】合成火焰文字

今天Astralweb要與大家分享利用影像合成來製作火焰文字,一起來看看吧 ※本教學需先對工具使用有基本認識 1.選擇 檔案>開新檔案 2.開啟我們要的尺寸,本範例並選擇黑底 03.使用文字工具寫出文字 04.調整透明度方便檢視 05.置入火焰的素材 06.使用濾色濾鏡 07.我們將火焰放置文字範圍內 08.可以使用變形來調整 09.使用不同火焰素材來合成 10.依此排列出左半邊 11.我們複製出相同的火焰 12.將它翻轉貼合至右半邊 13.最後做一些微調,讓它看起來不會那麼對稱 更多教學文章: Photoshop 教學導覽  

Photoshop:【繪圖實戰篇】繪製立體雜草文字

今天Astralweb要與大家分享,利用內建的簡單工具和基本繪圖觀念來繪製圖像,一起來看看吧   ※本教學需先對工具使用有基本認識 1.選擇 檔案>開新檔案 2.開啟我們要的尺寸 3.使用文字工具 4.在畫面上建立我們要的文字 5.選擇 3D>新增選取來自選取圖層的3D模型(可以參考之前的教學) 6.調整好我們要的角度與位置,來作為輔助 7.將不透明度調低,方便我們檢視 8.使用筆刷工具 9.選擇筆刷類型與調整尺寸 10.建立新的空白圖層 11.我們先針對一個面,繪製出它的邊緣 12.增加陰影 13.複製並填滿這個面 14.使用變形工具來旋轉,將草向外擺放

Photoshop教學:【基礎篇】製作載入中的GIF

今天astralweb要與大家分享使用Photoshop來製作簡單的GIF動畫,可以用在網頁下載的時後,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 1.開啟檔案(使用網頁尺寸) 2.使用繪圖工具繪製出我們要的載入畫面 3.本範例先畫出4個變化的元素 4.依此四個元素,排出每一格時間的畫面 5.並將每一個時間放在同一資料夾中,並將它們對齊同一位置與命名,方便製作 6.使用裁切工具 7.切出我們需要的圖片大小 8.在右上角切換至動態 9.就會出現動態介面 10.在下方點選建立影格動畫 11.此時代表第一個動態的畫面,所以只開啟第一個圖層 12.將停留時間選擇我們需要的長度

Photoshop教學:【基礎篇】製作復古老照片

之前與大家介紹過如何將照片更改成復古色調,今天要與大家分享如何製作一張仿舊的照片,一起來看看吧! ※本教學需先對工具使用有基本認識 1.準備一張照片和一張水泥牆或老舊的材質照片 2.開啟一個新的檔案 3.自定需要的尺寸 4.使用矩形工具 5.畫出老照片的區塊,並將區塊點陣化 6.使用筆型工具 7.依據方塊範圍繪製出照片缺角的部份 8.選取未繪製出的地方 9.將一開始畫的區塊刪掉缺角的部份 10.置入材質照片,並將照片點陣化 11.將材質照片使用建立剪裁遮色片 12.選擇 影像>調整>色彩平衡 13.我們將它調整成復古色調 14.我們使用陰影與內陰影做一些照片厚度

Photoshop教學:教學【入門篇】快速修改單一色系(含影片)

之前與大家介紹過如何更改圖像中的部份顏色?今天要與大家分享如何改變單一色系的顏色與直接修改的差異,一起來看看吧! 1.置入要修改的圖片 2.點擊色版視窗,也可以選擇 視窗>色版 找到它 3.按著Ctrl後點擊其中一個色版 4.自動框選出所有紅色範圍 5.選擇 影像>調整>色相/飽和度 6.就會改變紅色的部份 7.在這邊提供直接便顏色的效果來對照,此方式只會更動一個色彩,如果我們直接轉換的話,所有顏色都會變動 教學影片:快速修改單一色系 Photoshop 教學導覽  

Photoshop教學-隱形浮水印

今天Astralweb來教大家如何製作隱形浮水印 1. 新增2×2像素檔 2. 點縮放顯示工具,放大到3200% 3. 再點選取工具,在左上與右下框取二個區塊,並填滿為黑色 4. 接著點編輯定義圖樣,定義成圖樣 5. 輸入欲顯示浮水印的文字後,按住Ctrl鍵,點一下圖層,文字將自動被選取 6. 點建立新填色或調整圖層,再點圖樣(關掉文字圖層顯示) 7.  接著選擇先前定義的圖樣 8. 點設定圖層的混合模式,將其設為柔光,不透明度設為 50% (不透明度建議50%以下,再依個人喜好設定) 9. 接著可自行移動浮水印位置,讓浮水印隱藏在圖片,這樣就完成了 Photoshop

Photoshop教學:【基礎影像合成】黑咖啡變身拉花拿鐵

  今天Astralweb要與大家分享簡單的區塊合成,一起來看看這次效果要如何製做吧! 本教學需先對工具使用有基本認識 1.我們需要2張素材 2.將要修改的照片置入 3.另外開啟素材照片 4.我們使用橢圓工具 5.我們繪製出要取下的範圍 6.調整不透明度,方便我們檢視 7.然後按Ctrl+T進行變形 8.調整至符合要取下的範圍 9.選取此物件範圍並複製 10.貼上至要修改的照片裡 11.由於此範例是斜橢圓 12.可以先旋轉至正橢圓 13.再一次Ctrl+T進行變形 14.調整至需要的範圍 15.使用加深工具 16.運用光影的概念,將邊緣加深 17.完成 Photoshop

Photoshop教學:【基礎篇】無限延伸小技巧

今天Astralweb要與大家分享PS的影像合成的小技巧,利用照片上部份區塊,將畫面一直延伸出去,一起來看看要如何製做吧! ※本教學需先對工具使用有基本認識 1.置入我們要修改的圖片 2.先框選出背景部份 3 .取下背景 4.框選大樓的一部份包含可以延伸的區塊 5.取下大樓 6.使用裁切工具 7.先將畫面延伸加高 8.先貼上背景 9.使用仿製印章工具 10.補上不足的部份 11.如畫面 12.接著將大樓貼上 13.我們框選大樓一個區塊來作延伸 14.然後複製下來並貼上 15.將它對齊原本大樓的下方,以此方式延伸 16.如果有銜接不起來的地方 17.可以使用變形調整 18.細部修飾 19.完成

Photoshop教學:【基礎影像合成】更改路面標示

今天Astralweb要與大家分享PS的影像合成技巧,利用影像合成將2張以上照片組合成最終想要的結果,照片素材好壞也很重要,一起來看看這次效果要如何製做吧! ※本教學需先對工具使用有基本認識 1.準備原圖一張與要合成的標誌一張 2.置入原圖 3.將標誌置入 4.先將它點陣化 5.使用魔術棒工具 6.點選黑色部分 7.將它刪除 8.按Ctrl+T變形 9.調整至我們要的位置 10.然後選取標誌範圍 11.使用筆刷或填色工具,將標誌顏色調整接近標線的顏色 12.對此圖層選擇濾色 13.由於此照片並沒有那麼清楚,我們選擇 濾鏡>模糊>高斯模糊 14.調整至接近其它的標線

PHOTOSHOP教學:快速又簡單的3D立體字

想做3D立體字卻不會使用3D軟體怎麼辦?一定要學3D軟體才可以做3D立體字嗎?答案是不用! 今天教大家如何使用Photoshop做出3D立體字 本範例使用的是Photoshop CS6版本 1. 準備一張照片,接著在左側工具箱點文字工具,選擇水平或垂直文字 2. 輸入文字與位置後,在文字圖層按滑鼠右鍵選擇新增來自選取圖層的3D突出 3. 彈出建立3D圖層視窗後,按 是 4. 此時可在上方3D模式選擇文字角度與位置(文字可直接拖拉) 共有4種可以選擇,分別依序有旋轉、轉動、拖移、滑動、縮放3D物件 5. 切換到3D面板,點「濾鏡: 光源」圖示,拖拉中間圓球調整光源位置(像衛星一樣的圖)

Photoshop教學:【實用篇】智慧型物件的修改方式

今天Astralweb要與大家分享PS的智慧型物件的修改方式,它可以節省我們許多時間,只要製作一次,之後就可以套用,一起來看看這要如何製作吧! 內含教學影片 ※本教學需先對工具使用有基本認識 歐斯瑞提供範例圖片讓您跟著我們設計師一起學習操作吧! 1.開啟需要製作的照片 2.將要合成的影像貼上或置入 3.將它轉換為智慧型物件 4.使用Ctrl+T變形,調整至我們需要的位置 5.這樣就完成模擬的效果,但要如何修改它呢? 6.我們對著智慧型物件的圖層,圖片地方點擊2下 7.就會另開啟畫面,我們可以直接作修改或置換圖片 8.我們做一些修改後 9.然後儲存檔案

Photoshop教學:【基礎影像合成】菸霧效果

今天Astralweb要與大家分享PS的影像合成技巧,影像合成利用2張以上照片組合成最終想要的結果,因此照片素材好壞很重要,一起來看看這次效果要如何製做吧! ※提醒您!吸菸有害健康,未滿18歲不得吸菸;本文章圖片僅為Photoshop工具的應用教學。 ※本教學需先對工具使用有基本認識 1.先準備原圖與菸霧素材一張 2.置入要合成的照片 3.再置入菸霧 4.將素材點陣化 5.選擇 影像>調整>色相/飽和度 6.降低飽和度 7.使用濾色濾鏡 8.就會過濾掉黑色部份 9.移動到我們想要的位置 10.可以再依需求將菸霧變形 11.使用模糊工具與橡皮擦工具 12.讓一部份模糊 13.如畫面

Photoshop教學:【基礎篇】水面倒影

今天Astralweb要與大家分享如何修改水面倒影,將海水的水面變成平整的湖面倒影,一起來看看這效果要如何製作吧! ※本教學需先對工具使用有基本認識     1.置入要修改的照片 2.使用矩形選取畫面工具 3.框選水面上的物件 4.複製並貼上 5.按Ctrl+T進行變形   6.我們在畫面上方H的值改成負的 7.產生上下鏡射的效果   8.選擇 影像>調整>亮度/對比   9.降低亮度、加強對比 10.選擇 濾鏡>模糊>動態模糊     11.調整成垂直的動態模糊  

Photoshop教學:【基礎篇】後製夜晚效果

之前與大家介紹入門的夜晚技巧,今天Astralweb要與大家分享稍微複雜的方式,要如何將白天變成夜晚的感覺,傳統做法花較多時間做得越細緻就會越漂亮,一起來看看這效果要如何製做吧! ※本教學需先對工具使用有基本認識 1.置入照片,本教學使用一個有路燈簡單的照片   此為原圖 2.先複製一個新圖層,來修改成光源色調   3.選擇 調整>色相/飽和度     4.我們將飽和度降低,明亮些微降低     5.選擇 影像>調整>亮度/對比     6.調高對比度     7.選擇

Photoshop教學:【入門篇】後製夜晚效果

Adobe公司發表一個新工具,相信大家都有看過Adobe正在開發中的白天變夜晚功能,今天Astralweb要與大家分享傳統後製的方式,要如何將白天變成夜晚的感覺,傳統做法花較多時間做得越細緻就會越漂亮,一起來看看這效果要如何製做吧! ※本教學需先對工具使用有基本認識 1.開啟修改的照片 2.使用筆型工具 3.我們先框選出窗內最亮部份 4.再框選次亮的窗簾部份 5.將同一部份合併在一起 6.按著Ctrl點選圖層,框選出圖層範圍 7.分別將兩個範圍複製出來 8.像畫面上這樣 9.然後我們拷貝新的背景圖層放在最下層來做背景  10.選擇 影像>調整>色相/飽和度 11.降低飽和度與明亮

Photoshop教學:【基礎篇】移軸模糊效果

使用版本Adobe CC 今天Astral web 設計師要與大家分享,【如何後製移軸模糊效果】此功能可以快速產生像是微距攝影的效果,適合運用在後製微距照、風景照等,一起來看看這效果要如何製做吧! 置入要修改的照片 選擇 濾鏡>模糊收藏館>移軸模糊 此時會產生預覽效果,我們可以拖曳中間黑點來調整位置 拖曳黑點外的圓型拉霸,可以增減模糊程度 我們可以拉動畫面上的線,調整從清楚到模糊的漸變範圍 按下Enter完成 教學影片: 更多相關文章 :Photoshop 教學導覽      

Photoshop教學:【基礎篇】後製魚眼效果

今天Astral web要與大家分享要如何後製魚眼效果,此效果可以運用在照片與文字上,運用在照片上時需要使用解析度較高的照片,一起來看看這效果要如何製做吧! 1.開啟一個方形的尺寸,並且是黑底的背景       2.我們先使用橢圓工具,來做底     3.畫出一個圓型後,將它點陣化     4.選擇 濾鏡>模糊>高斯模糊         5.調整需要的模糊程度       6.這是我們做出魚眼看到的範圍    

Photoshop教學:【基礎篇】快速調整影像尺寸

今天Astralweb要與大家分享如何更改照片或圖片實際的尺寸,我們通常看到數位照片的尺寸都相當的大,但有時候在網路上使用,我們不需要這麼大尺寸的圖片,今天與大家分享要如何快速調整影像尺寸。 開啟要修改的照片 選擇 影像>影像尺寸 會出現影像尺寸的視窗,此時會顯示目前影像尺寸的內容,可以選擇不同單位來做調整 要先更改解析度 此時寬度高度會自動對應此解析度的尺寸 我們再將寬或高調整成我們要的尺寸 按下確定後就可以更改尺寸   更多相關文章:Photoshop 教學導覽    

Photoshop教學:【入門篇】透視裁切工具

1.放入需要修改的照片 2.選擇透視裁切工具 3.先大致框選出要取下的範圍   4.然後進行調整 5.點選並拖曳第一個角 6.拖曳到要取下的平面的其中一個角 7.接著拖曳第二個角 8.接著拖曳第三個角 9.接著移動最後一個角後,按下Enter 10.就能取下這個平面 影片教學: 更多Photoshop相關文章:Photoshop 教學導覽

Illustrator教學:【入門篇】如何使用漸變工具

今天Astral Web要介紹如何用Illustrator漸變工具,來繪製出簡單的漸變效果,接下來就跟我們一起學習吧!   1.使用鋼筆工具 2. 點擊一個點做為起點 3.點擊並拖曳可以繪製成曲線  4.先繪製第一條線  5.使用同樣的方法繪製另一條線 6.我們先對漸變工具點擊2下  7.就能開啟他的設定視窗 8.可以選擇不同間距方式 9.在此選擇指定階數,方向選擇漸變方式 10.我們在第一條線上點擊一下(在此不會有任何反應如確認已點擊即可) 11.在第二條線上點擊一下 12.就會自動產生第一條到第二條中間的線條 13.我們可以使用直接選曲工具 14.來微調或修改 15.

Illustrator教學:【入門篇】自製向量筆刷

我們可以使用Adobe Shape App來拍下我們手繪好的筆刷 或者拍下後匯入至Ai再作即時描圖 將下方拉霸調整至合適的效果 確定後進行自動繪圖   將它置入於Ai中 框選全部物件 在筆刷的視窗下點擊新增筆刷按鈕 選擇筆刷類型 可以做名稱、寬度、縮放、方向等細部的設定 確定後便會產生新的筆刷 我們可以使用繪圖筆刷工具,並點選剛建立的筆刷 在畫面上畫出想要的線條 完成 想了解更多PhotoShop使用技巧嗎? 相關教學文章 ILLUSTRATOR教學: ILLUSTRATOR教學:【入門篇】使用即時描圖快速轉成向量物件 ILLUSTRATOR教學:【入門篇】使用ADOBE

Illustrator教學:【入門篇】使用Adobe Shape製作向量物件

之前與大家分享Illustrator中的影像擷取功能,Adobe結合行動裝置推出了名為Adobe Shape的app,更方便將圖像轉成向量格式,歐斯瑞要教大家如何使用Adobe Shape 1.可至關網下載Adobe Shape,目前只提供Apple app store     2.開啟Adobe Shape後就會啟動相機,即時預覽畫面 3.我們可對著需要擷取的圖像拍攝,而顯示綠色的部份是將會被擷取出來的範圍 4.我們可以調整下方拉霸,來調整擷取範圍的強度,確定後便按下拍照鍵 5.此時會預覽擷取出的畫面,確定後可以點擊下方勾勾 6.它會自動幫我們繪製出形狀

Illustrator教學:【入門篇】使用即時描圖快速轉成向量物件

有時後我們會需要將照片描繪成向量的圖片,且不需要太精細時,就可以使用即時描圖,但需要對比強烈的照片(如剪影),才適合用這種方式處理 首先將照片匯入Photoshop之中 選擇 影像>調整>亮度/對比 加大主體與背背景的對比 也可以使用加亮工具,來調整部份範圍 範圍選擇亮部(畫面上較亮的地方會被我們調亮) 然後對局部做修飾 接者存成圖檔後,匯入Illustrator 點選匯入的圖片 在上方的 影像描圖 中選擇需要描繪的方式(此範例選擇黑白標誌) 就會擷取出大至上的輪廓 如果我們要進行編輯,要點選上方的展開按鈕 因為它會自動將物件群組 對物件按右鍵 解散群組 接著可以使用橡皮擦工具

Illustrator教學:【入門篇】鋼筆工具

鋼筆工具是Illustrator很常使用的基本工具,它與PS中的筆型工具有些相似,今天歐斯瑞要和大家分享如何使用這個工具! 開啟新的範圍 我們使用這個形狀當作範例 使用鋼筆工具 點擊一個起始點   會自動連出一條線可以預覽 我們再點擊第二點 我們再準備點擊第三點 此時因我們要繪製弧形,所以要點擊後並拖曳 拖曳至我們要的弧度,就能放開滑鼠左鍵 由於下一條是直線,我們可以點擊Ctrl+左鍵來調整控制點 將控制點調回結點中 就可以直接點擊下一點 在此我們也可以在弧形中間建立結點 一樣要點擊後並拖曳至我們要的弧度 最後結點,可以點擊後並拖曳做微調 完成繪製 我們可以放入一張照片來描繪

Photoshop教學:【基礎篇】更改眼鏡反光

有時拍照後反光部份並不是我們想要顯現的,我們可以使用Photoshop更換想要呈現的效果! 1.開啟要修改的檔案 2.使用筆型工具   3.描繪出眼鏡反光的範圍 4.描繪出眼鏡反光的範圍 5.描繪出眼鏡反光的範圍 6.描繪出眼鏡反光的範圍 7.我們可以更改顏色 8.按著Ctrl+左鍵來點擊圖層 9.可以框選出此圖層物件範圍 10.使用筆刷工具 11.調整筆刷大小       12.在新建立的圖層上面繪製 13.繪製出反光面色彩 14.選取兩圖層後按右鍵,合併我們繪製的兩片眼鏡圖層 15.丟入一個照片做為眼鏡反光的圖像 16.對圖層按右鍵,建立剪裁遮色片

Photoshop教學:【基礎篇】畫面延伸小技巧

  在之前我們介紹過【仿製印章工具】可以用在小區域的延伸,現在要與大家分享如何快速延伸大區塊畫面,此方法可以用在簡單的背景上,變形後看不出來的區域 開啟我們需要的尺寸 置入我們需要的圖片,但會發現左右區塊不足 我們先將圖片點陣化 使用矩形選取畫面工具 我們先做右邊的部份,框選一部份背景 按Ctrl+T來做變形 由於此區域是水平直線,我們可以直接向外拉伸 接著處理另一邊 一樣使用矩形選取畫面工具作框選 按Ctrl+T來做變形 向外拉伸 由於這部份是透視的線條,我們點選左側上下結點 將他上下拉大,調整至我們需要的樣子 完成 【基礎篇】畫面延伸小技巧影片教學:

Photoshop教學:【入門篇】使用切片工具存取大量圖片

在很多時候會需要將照片存成圖檔,但當遇到大量圖片時,一張張裁切後再存取會相當麻煩,今天教大家使用切片工具來存取檔案中的圖片。 1.開啟我們要存取的檔案 2.使用切片工具 3.框選需要存取的物件 4.框選完成後變可以調整框線 5.可以進行微調 6.依此將所有物件框選完畢 7.如要存取沒有背景的部份 8.記得先將背景物件關閉 9.選取 檔案>存取為網頁用 10.會跳出設定視窗 11.在預覽畫面中,我們選取需要的圖片 12.選擇我們要存取的格式 13.按儲存後選擇存取的位置 14.選擇我們要存取的格式 15.選擇存取哪些切片 16.存檔後就會存取在一個images資料夾內 完成

Photoshop教學:【入門篇】仿製印章工具

有時需要將畫面做一點延伸,但空白的區域我們就可以使用【仿製印章工具】,此工具適用在背景較為簡單的圖片上  1.開啟我們需要製做的尺寸 2.將照片匯入 3.對照片的圖層點擊右鍵點陣化 4.使用仿製印章工具 5.調整筆刷的大小  6.按著Alt鍵在畫面上吸取一塊位置來做為填補的依據 7.接著就可以直接做填補 8.圓圈是我們筆刷的位置,「+」號的地方是作為填補的依據  9.在有圖樣的區域,我們只要將筆刷與填補的區域保持水平就能填補 10.另一邊也是使用一樣的方式 11.完成 想了解更多PhotoShop使用技巧嗎? 請參考我們的教學導覽: PhotoShop教學導覽,幫助使用者快速找到相關教學!

Photoshop教學:【基礎篇】使用透視彎曲快速調整透視角度─Part2

之前有介紹過透視彎曲工具,可以對物件做透視的修正,也能將拍攝完成的廣角照片做細部調整,之前的範例教學是將物件置入空間,再做透視微調(請參考PHOTOSHOP教學:【基礎篇】使用透視彎曲快速調整透視角度─PART 1),本篇文章將同樣使用透是彎取示範如何修改廣角照片,讓照片角度更「對位」。 1. 放入要修改的照片。 2. 先拷貝一個新圖層。 3. 選擇編輯 > 透視彎曲。 4. 在畫面中拉出一個框。 5. 調整貼齊照片中一個牆面。 6. 一樣再拉出另一個框,兩個框接近時會出現藍色線條。 7. 放開滑鼠後便會自動接合。 8. 再拉出上方的框。 9. 將兩邊貼齊前兩個框。

Photoshop教學:【基礎篇】如何修飾張嘴的照片?

為了讓照片看起來更完美,今天要介紹如何修飾不小心張嘴的照片,利用「物件」塑形和合併,就能達到緊閉雙唇的效果喔!當然,也可以將此方法應用在其他層面,是個相當實用的技巧喔,接著請參考以下教學文章。 1. 開啟想要修改的照片。 2. 在此範例中,我們先將下嘴唇大致框選出來,然後複製(Ctrl+C)、貼上(Ctrl+V) 3. 使用橡皮擦工具(硬度調高)擦掉嘴唇多餘的地方。 4. 再使用橡皮擦工具(硬度調低)擦掉下方的邊緣 5. 一樣將上嘴唇大致框選出來。 6. 然後複製、貼上(Ctrl+C,Ctrl+V) 7. 使用橡皮擦工具(硬度調高)擦掉嘴唇多餘的地方。

Photoshop教學:【基礎篇】使用透視彎曲快速調整透視角度─Part 1

Photoshop在最新的CC版本中增加一個透視彎曲的新功能,能快速修改透視角度,本篇文章將與大家示範如何置入物件,進行透視微調。 如果你對透視彎曲這項工具有興趣,可參考我們另一教學文章:PHOTOSHOP教學:【基礎篇】使用透視彎曲快速調整透視角度─PART2,介紹如何使用彎曲透視調整廣角照片,讓照片更「對位」! 1. 打開背景  2. 將去背過的桌子置入 3. 先將桌子點陣化 4. 選擇 編輯>透視彎曲 5. 點擊滑鼠拖曳,就能拉出一個範圍,此範圍代表一個面。 6. 藉此調整四個控制點,來貼齊桌子的其中一個面。

Photoshop教學:【基礎篇】內建簡單繪畫效果

Photoshop有很多種內建的繪畫效果,可以快速產生簡單、豐富的效果。如果重複使用這些效果,可以讓它更符合需求喔!今天Astral web要和大家分享,如何使用這些濾鏡來製作簡單又適切的繪畫效果。 1. 開啟檔案 2. 拷貝一個新的圖層 3. 使用 濾鏡>濾鏡收藏館 4. 接著會出現一個視窗,在此可選擇想要套用的濾鏡效果 5. 左下角可以選擇預覽的畫面大小 6. 選定好想要的濾鏡效果後,可以調整尺寸內容,此範例選用乾性筆刷 7. 點擊確定後就會套用到原本照片上 8. 選擇 影像>調整>色相/飽和度 來增加彩度 9. 再拷貝一個新的圖層,來做遠景的部分 10. 選擇

Photoshop教學:【入門篇】如何使用參考線

在進行網頁設計的時候,經常會需要很精準的對齊方式,今天Astral web要和大家分享如何使用PS的參考線協助,在排版上會有很大的幫助。基本上完成的網頁PSD檔,裡面會使用很多的參考線來對齊版塊,在製作時其實相當方便,當然這些線條並不會被存取出來。 1. 請先開啟新檔 2. 我們以使用矩形工具作示範,先在畫面上拉出一個框。 3. 然後在內容視窗中,更改實際尺寸。 4. 然後將它對齊,我們選取矩形圖層與背景圖層。 5. 然後上方會出現對齊的按鈕,點選對齊。 6. 然後選擇在矩形的圖層上,之後拉動參考線就會吸附在此物件邊緣。 7. 可以按著Ctrl+R開啟尺標。 8.

Photoshop教學:【基礎篇】實用的建立剪裁遮色片

使用Photoshop有許多變化的小技巧,今天Astral Web要介紹的是「剪裁遮色片」,快速做出框架效果,還能編輯、調整主要圖片,若未來需要修改也能輕鬆編輯! 接下來就請跟著我們一起操作吧! 1. 開啟檔案。 2. 使用矩形工具。 3. 拉出一個框框當作背景。 4. 在矩形的圖層中點擊縮圖2下。 5. 更改想要的顏色。 6. 建立新的圖層。 7. 使用筆刷工具。 8. 選擇一個不同型態的筆刷。 9. 調整筆刷大小。 10. 用筆刷畫出一個可放置照片的區塊。 11. 置入一張照片。 12. 對著照片圖層點選右鍵,選擇 。 13. 可任意調整位置與大小。 14.

Photoshop教學:【概念篇】如何正確選擇檔案尺寸?

Photoshop(以下簡稱PS)的運用範圍廣大,不論是設計印刷品、網頁或視訊影片等,都是PS的應用範圍。但不同領域會有不同的尺寸需求,要如何開啟適當的尺寸來設計呢?今天Astral web要帶大家認識開啟檔案尺寸的基礎,希望大家在進行不同設計時,更能清楚得知尺寸設定。 開啟PS後,可以先選擇檔案>開啟檔案。 接著會出現新增視窗,下列為欄位簡述: 名稱:請輸入檔名 預設集:選用PS已預設好的各類型與尺寸 尺寸:選擇預設類型中的尺寸 高度寬度:輸入畫面寬度/單位調整 解析度:輸入畫面解析度/單位調整 色彩模式:選擇色彩類型 背景顏色:開啟時畫面底色

Photoshop教學:【進階篇】使用Photoshop自動對齊圖層工具合併全景照!

許多人喜歡用全景模式來拍攝風景,可以捕捉風景的全貌,展現景色的壯觀與氣勢。目前市面上的智慧型手機或相機已有全景模式的功能,但如果你想要更專業的全景照,可以使用數位相機或單眼來拍攝,再用PhotoShop來合成。雖然較為麻煩,但畫質會高出許多,並可降低重疊失敗的區塊。 今天Astral Web要和大家介紹如何合成全景照,展現風景的壯麗感喔!   步驟 1. 請先選取拍好的第一張全景照。 步驟 2. 置入Photoshop當中。 步驟 3. 此時就會開啟這張照片原本的尺寸。 步驟 4. 接著選取其餘的照片。 步驟 5. 將所有照片丟入在第一張圖的檔案中。 步驟 6.

Photoshop教學:【入門篇】使用汙點修復筆刷工具快速修圖

歡迎閱讀PhotoShop教學文章,今天Astral Web要介紹「汙點修復筆刷」這項實用的工具,可以輕鬆移除臉上斑點、瑕疵和細紋,美化肌膚;讓照片裡的人像不用粉底、遮瑕膏也能展現細緻肌膚,是個相當方便的修圖功能。現在就準備一張不滿意的照片,一起和我們修圖吧! 步驟 1 請先開啟要修改的圖檔。 步驟 2 使用汙點修復筆刷工具。 步驟 3 調整一下需求尺寸與邊緣硬度。 步驟 4 將筆刷框完全包覆在欲去除的部分,再點擊一下。 步驟 5 就能將汙點去除。 步驟 6 若欲去除的區塊過大,可按住左鍵不放進行拖曳。 步驟 7 選好要修飾的區塊後,再放開左鍵。 步驟 8 即能修飾選取部分。 步驟 9

Photoshop教學:【基礎篇】手繪影像處理

今天Astral Web要和大家介紹手繪影像處理,教大家如何將手繪的圖稿,用Photoshop修改成乾淨的電腦圖稿,方便用於其他圖像合成。我們的網頁設計Banner,就是利用實際手繪圖稿,再用Photoshop進行修改,做出草稿的感覺;一個簡單的巧思,就能做出富有創意的圖像,接下來就讓我們一起操作吧! 1. 將手繪圖稿拍照上傳至電腦後,以Photoshop開啟。 2. 拷貝新圖層。 3. 由於圖稿較不整齊,可按ctrl+T將圖像進行變形。 4. 修正至較正常的比例。 5. 選擇 影像>調整>去除飽和度 6. 就會變成黑白畫面。 7. 如果圖像太暗,可選擇

Photoshop教學:如何後製燈光效果?

有時候照相因為光源、設備等關係,不易把絢爛的燈光完美地以照片呈現出來;如果你會Photoshop的修圖技巧,也許可以改善這個問題,直接以後製的方式調整色彩,製造燈光效果!Astral Web上次和大家介紹過如何調整圖像的部分顏色,今天要延伸到整體版面,教你以漸層的方式調整色彩,製造想要的燈光效果。 接下來就請跟著我們一起操作吧! 1. 首先,請先開啟你想修改的圖像。 2. 新增一個空白圖層。 3. 使用漸層工具。 4. 接著,選擇漸層的樣式和種類。 5. 點選工具列下方的色塊,可以選擇顏色。 6. 接著選擇欲繪製的燈光色彩,我們以橘色作為示範。 7.

Photoshop教學:【基礎篇】如何更改圖像中的部份顏色?

上次和大家介紹過如何將照片調成復古色調,今天Astral Web要教大家調整色彩的小技巧,一樣使用色相、飽和度等功能,調整部分顏色。例如我們提供的範例圖像,將藍色的牛仔襯衫改成黑色,而不更動到其他區塊的色彩。那麼接下來就跟著Astral Web一起修圖吧! 1. 打開欲修改的圖片。 2. 使用魔術棒工具。 3. 框選想要修改顏色的範圍,並對選取範圍按複製與貼上,也就是另外存出圖層來做改色動作。 4. 然後選擇 影像>調整>色相/飽和度。 5. 可以改變它的顏色(色相)還有飽和度。 6. 接著使用套索工具來做另一部分顏色更改。 7. 大致框選出要改色的範圍。 8.

Photoshop教學:【入門篇】將照片調整成復古色調

上次和大家介紹過如何製作產品倒影,今天Astral Web要教大家修改照片色彩,調成復古色調讓照片更有味道!雖然現在有許多軟體可以直接調整色調,對一般使用者來說相當方便;但這些軟體的調整範圍不大,通常只能套用整張照片,無法隨意調整應用範圍。使用Photoshop則可以在想要修改的區塊調整色彩,讓整體調色更細緻、有質感。接下來就跟著我們一起操作吧! Step 1. 首先,請先開啟需要調整的照片。 Step 2. 選擇 影像>調整>色相/飽和度 Step 3. 先降低圖片的飽和度(彩度)。 Step 4. 選擇 影像>調整>色彩平衡 Step 5.

Photoshop教學:【基礎篇】產品倒影製作

上次教過大家如何使用圖層樣式製作文字特效,豐富版面設計;今天Astral Web要介紹如何用Photoshop製造倒影效果,增加立體感,尤其適用於產品圖片,讓產品更吸引人,在做形象網站、產品簡介等都相當好用喔!倒影技巧也可應用於一般平面設計,突顯你想要的影像;那麼接下來就跟我們一起學習吧! Step 1. 首先,置入一張已去背的產品圖片。 Step 2. 拷貝一個新的圖層來製作倒影。 Step 3. 按Ctrl+T進行變形。 Step 4. 在上排的數值中,W代表橫向方位,H代表垂直方位;所以我們在H數值中輸入-100%,便能產生上下鏡射效果。 Step 5. 調整一下位置對齊底部。

Photoshop教學:【入門篇】使用圖層樣式製作文字效果與全部套用

上次和大家介紹過修復工具的使用方法,是能快速除去皺紋、疤痕等,美化肌膚的修圖技巧,簡單實用。今天Astral Web要教您如何使用圖層樣式,添加文字特殊效果,適用於醒目的標題製作。此技法難度極低,相信初學者也能快速上手,並能靈活運用創造更多令人驚豔的文字效果。準備好了嗎?接下來就跟著我們一起操作吧! Step 1. 首先,請先開啟一個空白畫面。  Step 2. 在工具列中選擇文字工具,依需求選擇直式(垂直)或橫式(水平)的文字。  Step 3. 在畫面中點擊一下,即可輸入文字。 Step 4. 文字輸入完成後,使用工具列中的移動工具,調整至你要的位置。 Step 5.

PhotoShop教學:【入門篇】讓你年輕20歲的除皺修圖技巧!

Astral Web之前和大家介紹過去背的方法(標準去背、快速去背),以及製造景深的效果。 今天要和大家介紹效果強大且簡單的修復工具,只要一個簡單的修圖技巧,就能去除肌膚上的疤痕、斑點以及皺紋等,讓人瞬間年輕20歲,恢復青春光彩! 此教學相當簡單,適用於所有朋友學習,初學者也能輕易上手!另外,為了幫助初學者了解筆型工具的定義,我們將會在文章中以簡單的圖片和大家講解。 1. 請先選一張可用到修補技巧的照片,並以Photoshop開啟。   2. 在工具列中選擇修復工具。 3. 框選有皺紋的部分。   4. 將此區塊拖曳到沒有皺紋、平滑的地方。 5. 即可消除皺紋。 6.

PhotoShop教學:【基礎篇】後製背景模糊的景深效果!

Astral Web前二週和大家介紹了一些去背的方法(筆型去背、魔術棒快速去背),今天則要教大家延伸去背的處理,製造背景模糊的景深效果,讓主體與背景有落差,突顯主體讓照片更吸引人! 註:本教學適用於對Photoshop有基礎概念的朋友,例如:圖層、去背、選取功能等應用。 準備好了嗎?現在請你先準備一張照片,最好要有明確主體才能呈現景深效果。 1. 我們選擇了有明確主體(人物)的照片,於Photoshop開啟進行後製處理。 2. 我們使用筆型工具   3. 將要模糊的背景描繪出來 4. 拷貝一個新的圖層 5. 框選繪製的物件範圍 6.

Photoshop教學:【入門篇】使用筆型工具標準去背

Astral Web上次和大家介紹過用魔術棒快速去背的方法,適用於背景簡單的圖片;今天則要教大家用筆型工具的去背方法,是最標準的去背方式,適用於各種圖片或是背景複雜的圖片。為了讓初學者了解筆型工具的定義,我們先簡單的圖片和大家講解,特別注意此教學適用於對Photoshop有基礎概念的朋友,例如:圖層、選取功能等應用。 首先來了解如何使用PS的筆型工具。 我們將使用下圖來講解,圖中紅色部分是我們想取下的部分。   1. 在工具列中選擇筆型工具(長按滑鼠左鍵可顯示收合的其他工具)     2. 左上角的下拉選單中,我們使用形狀(有填滿顏色的內容)  

PhotoShop教學:【入門篇】使用魔術棒工具快速去背與限制

  圖片去背的方法有許多種,正統的去背方式乾淨且標準,最能完美呈現圖片;相對地需要花較多時間處理。今天Astral Web要和您介紹快速去背的方法,節省時間更有效率!當然,相較於正統的去背方式,快速去背會有一些條件限制,您可依照圖片內容選擇去背方式。   在進行教學之前,先介紹魔術棒工具去背的限制: 一、背景色彩越簡單越好: 背景需簡單或是單一顏色,主體與背景對比要夠強烈,框選時才能將背景處理乾淨。 二、圖片解析度越大越好: 其實在做影像處理時,圖片解析度越好,處理時也越方便,成品也會更漂亮。 了解魔術棒的限制後,接下來就選張適合的圖片跟著Astral Web一起去背吧!

Magento主題樣板,網站設計快速又美觀!

網路購物的熱潮持續看漲,許多人靠電子商務創業,成功案例多;傳統的實體店面、百貨專櫃也紛紛轉戰電子商務,拓展網路商場。網路市場廣大,不受地域限制,如何吸引消費者上門購物是商家不斷探討的課題。如同實體店家需要裝潢門面,網路商店也需要裝飾設計,打造店家風格,並以適合消費者瀏覽的方式陳列。 Magento購物車系統除了提供實用的管理功能,還有各式各樣的網站樣板供商家選擇。今天要和大家介紹的就是Magento「主題」,大部分需要付費下載,但也不乏免費使用的主題,商家可依個人喜好選擇想要的版型,再進行更換圖片或客製化修改。有了版型作為架構,網站設計更加有頭緒,輕鬆塑造商家想要的網站!

Photoshop教學:如何做出熱騰騰的食物蒸氣,讓人看了垂涎欲滴!

您知道如何讓食物照片更加吸引人嗎?今天Astral Web要介紹使用Photoshop「雲狀效果」濾鏡,做出熱騰騰的食物蒸氣,為您的美食照片加分! Step 1. 首先請準備一張食物照片,點選【圖層 > 新增 > 圖層】,將此圖層命名為「蒸氣」,模式設為「濾色」,不透明維持「100%」,並將以「網屏-中間調顏色填滿 (黑色)」項目打勾,按下確定。   Step 2. 將工具列的前景色和背景色恢復成預設值 (黑/白),點選【濾鏡 > 演算上色 > 雲狀效果】,蒸氣圖層已產生雲狀效果囉!     Step 3. 點選【濾鏡 > 扭曲