文、G小編 除了純色、漸層（4個網站 快速打造漸層背景）的背景外，另外介紹一個比較特殊的風格──LOW POLY，之前國外很流行的向量繪圖風格，是以連續三角或四角形的排列組合，近看是多邊形的色塊，但遠看就會看出全貌，這樣獨特且具現代感的風格，受到許多設計師青睞，再搭配不同的顏色與小變化，更能創造出低調而奢華的視覺，讓你的設計更獨樹一格。 接下來，一起欣賞另人驚艷的LOW POLY作品。 Jack Nicholson - Low Poly By Paul DOUARD Game-of-Thrones Tyrion-low-poly By Ignacio Ribot The JOKER - LOW POLY By Ignacio Ribot Animals Illustration (Low Poly) By Abdo Hamad Etihad airways / LowPoly Sydney By Mat Szulik Low Poly - Characters By Jona Dinges Low Poly By Lisa Dutra Mother of Dragons - Commission work By Simon Delart Low poly Portraits By Abdelhamid Zainhom 欣賞完令人讚嘆的作品後，如果不會Photoshop或Illustrator等軟體，又想製作LOW POLY風格的話，小編推薦4個線上產生LOW POLY的工具給大家運用喔！ 1. 藍色早晨UED 網址點我 這是一個線上製作LOW POLY風格的網站，不需要額外下載安裝檔案，操作方式也相當簡易，只要把照片拉進去，開始在圖上按滑鼠左鍵，就能拉出三角形（如下圖），如果調整透明度，還可以看見原本的照片。 如果很懶的人，也可以利用隨機鈕，多按幾次，就可以製做出很細緻的LOW POLY，最後只要存檔就可以使用囉！還能存SVG檔，以利後續再編輯調整。 2. Image triangulation experiment 網址點我 這也是一個能快速製作LOW POLY風格的工具，操作方式也很簡易。 選擇open image後將圖檔匯入。 接著開始細部調整blur、accuracy、point-rate和point-count等選項，調完後按下download image，可以下載png與svg檔案。 不過由於是較快速產生圖檔，細緻度就不如自己親手製作了。(上為原圖) 3. Trianglify Generator 網址點我 網站一開始進來有提供語法，讓你可以直接使用預設的樣式，如果都沒有喜歡的，那就選擇Trianglify Generator，自己動手做吧！左邊有預設27組配色，透過Variance和Cell Size去調整出你喜歡的感覺。Variance越接近1越是不規則的多邊形；反之，則多邊形越規則，而Cell Size則是多邊形的大小，如果形狀越大，那麼多邊形的數量就比較少（如下圖）。 選擇Add Custom Palette可以自訂你喜歡的顏色喔！ 這次小編將Variance數值調小，是不是感覺就很不同呢？！最後可以匯出SVG或PNG檔。 4. TRIANGLIFY BACKGROUND GENERATOR 網址點我 和上一個線上製作的網站操作方式接近，網站內的配色則是從COLOURlovers挑選前100組熱門的顏色來使用，沒辦法自己調選顏色，另外，檔案下載只有PNG檔喔！ [ 給我進修，其餘免談 ] 創造不可能的極限：Photoshop影像處理 以設計之名揮灑創意：Illustrator向量繪圖 會設計也會行銷 由美編晉升「設計師」的決勝點：我要成為創意視覺設計師 痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w
1.了解使用者如何閱讀網頁 一般來說，人們瀏覽網站時，不會用閱讀的方式，而是以掃視的方法瀏覽網頁，透過眼動追踪技術(Eye tracking)能夠精確、無干擾地追蹤人們眼球移動的過程，量測人類細微的意識行為。由研究發現，使用者瀏覽網頁一般傾向由左上開始移至右方，直到下一行的水平方位，但掃視面積逐漸縮短，這樣的模式在圖表中會出現類似F的形狀，因而稱之為F模式(F-pattern)。雖說這是研究出來人們慣性的閱讀模式，但在專業的視覺設計中，是可以做到改變這種既有的眼動圖形。 來源：envato by Brandon Jones 2.可閱讀性與對比性是關鍵 對於電腦或行動裝置來說，瀏覽網站時文章的長短十分重要，在文字的版面設計中，必須先確認內容的可閱讀性，確保文字段落間有一定的空白和距離，方便讀者的瀏覽與辨識，之後才是美感的設計。 最後的亮度測試也同等重要，請檢測在手機與電腦中各種亮度下是否都能順利地閱讀。 圖說：除了對比度很重要之外，字的間距必需適當，太小或太大都不適合。 3.了解使用者才能避免被淘汰的可能 當使用者瀏覽您的網站時，會因為要做很多額外的動作，開始感到厭煩，甚至是註冊會員，這些都可能會讓使用者產生反感而離開網站，並且會降低再次造訪的可能。 最好就是了解使用者為何而來？滿足他們的需求，給予想要的產品資訊或服務，自然而然地，使用者就會對你忠誠。 4.將404錯誤頁面化為轉機 當出現404錯誤頁面時，代表伺服器找不到頁面，但這時別讓網頁呈現預設的404錯誤訊息。因為這不僅是展現幽默與個人風格的機會，也可以隨著錯誤訊息裡協助使用者找到他們所需的頁面，引導鼓勵使用者重新搜尋，或是在網頁中顯示熱門連結與聯絡資訊。 對於連結到一個錯誤的頁面，試著把品牌的傷害降到最低，甚至創造出使用者再次造訪的機會，才是真正的把危機化為轉機。 想知道什麼是404嗎？ 網頁設計的404代碼 如何化危機為轉機？遇見美麗的404錯誤 5.行動裝置與PC的體驗差異 當你設計一個行動裝置的APP時，必須先試想幾個要點，從身處的環境來說，它們可能會在哪裡使用？哪些時機下使用？都是需要列入考慮的因素，因為以行動裝置來說，連上網站的頁面時，極有可能因為所處的位置而導致分心，所以在設計上我們必須多花點心思，例如將網頁的文字及按鈕重新規劃，使它們看起來更清楚明瞭，讓使用者在操作上更能理解與集中。 6.別把影片當作主角 假使想通過影片來傳達主要的資訊，極有可能會失敗，因為大多數的使用者對於影片大致會略過，即使點擊也只觀看部分片段，並不會完整看完，因此在設計網頁內容的同時，必須確保即使沒有影片，在文字上依然能得到完整的訊息，影片的用途是來提升使用者體驗，但絕對不會是傳遞資訊的主要管道。 原文出處：6 Tips for a Better Understanding of the User Experience 痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w
文、菜鳥編 漸變工具算是在illustrator中也算是使用頻率高的工具，更可搭配其他工具製作出不同形變造型。下圖的魚骨頭，就是這次的主角囉，除了頭尾之外，剩下的都是使用漸變工具就可以完成的。 ►推薦課程：Illustrator向量繪圖 步驟一、繪製兩個不同大小的圓 先在illustrator中，製作出兩個不同大小的圓，並讓它有點角度。 步驟二、使用漸變工具，製作出等階變化的圖形 在漸變工具中，點擊滑鼠左鍵兩次，就可開啟設定視窗。間距部分選定「指定階數」 ，並設定為6階。分別點擊兩個圓圈，就可製作出等階變化來。 步驟三、將物件展開，製作出等距魚骨頭 將步驟二所製作的的物件進行展開，使其每個圓圈成為獨立物件。 接著複製出第二條魚骨頭，並適當地縮小比例，在比照步驟二方式，製作出下圖效果來。 步驟四、後製完成 相信到這邊，你應該也可以很快地製作出下方紅框處的骨頭來。 下方部分，可使用鏡射工具製作出來 。 最後，將魚的頭與尾巴繪製出來，整體就完成了。 痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w
文、菜鳥編 Photoshop好玩的地方就是在可以運用工具做出多元化的特效處理，妥善運用工具就可將一張普通的照片變得很有設計感。這次我們就來看怎麼將照片結合網格來製作出有設計感的東西來。讓照片有點像是磁磚貼的感覺。 首先看一下完成的作品圖 步驟一、使用單線選取畫面工具製作出第一條網線 首先，新增一個空白的圖層，接著使用單線選取工具，而單線工具位置如下面圖片紅框處，使用水平或垂直都可以，主要是先製作出1個像素寬的線條來。 這邊鳥編以水平單線選取工具來製作，選取好工具後，在畫面任一位置點擊並填入顏色，不過，建議是靠近圖片邊緣位置比較適合，鳥編這編以白色填入，先將第一條線網條製作出來。 步驟二、製作所有水平網線 製作出第一條後，接著就是用快速鍵來快速製作出網格來。所以這邊先介紹一下一些方便的快速鍵： Ctrl+J：複製目前所在的圖層 Ctrl+T：變形 Ctrl+Shift+Alt+T：重複指令 Ctrl+E：合併所選擇的圖層 在步驟一所製作的網線圖層，使用Ctrl+J複製出另一個，接著使用Ctrl+T來進行變形。此時，你可以使用方向鍵將第二條線條移動至適合的位置，記得完成時使用「Enter」結束。 製作完第二條後，就可以使用Ctrl+Shift+Alt+T來重複剛剛所有的指令，製作出全部的水平網線來，完成後就會如下圖所示。 最後，就是選取所有水平的網線，並使用Ctrl+E將圖層合併。 步驟三、製作出網格 將步驟二最後所製作出的合併圖層，使用Ctrl+J再複製出一個，並使用Ctrl+T，使用選轉，製作出垂直的網線來。最後再將水平與垂直的網線使用Ctrl+E來合併，就可以看到完整的網格了。 不過可以發現，線條似乎過細，為了呈現更好的效過，這邊可使用筆畫工具，將線條的寬度加大。 寬度加大後的效果如下 步驟四、使用遮色片將部分區域隱藏 下面可以看到目前總共有三個圖層，其他一個為前面步驟所製作出來的網格，另一個則是一開始的粉紅頭髮女子圖片(命名為網格效果應用素材)的複製。 在網格圖層中，使用魔術棒工具，將後續要保留的網格選取起來。 最後在網格效果應用素材中，使用遮色片，就完成了。 痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w
文、G小編 網頁該呈現什麼樣的風格？可別小看網頁背景的設計，背景就像綠葉一樣，能襯出紅花的美，有時候越素雅簡單的背景，更能突顯主視覺或主商品的重要性，回顧一下2017年的網頁設計趨勢裡提到，漸層背景成為潮流，已有不少企業也跟上潮流，炫麗的漸層配色，如果搭配的巧，就像幸福的極光般，增添不少美感，例如： 截圖自Stripe官網 截圖自Asana官網 Instagram的LOGO改為較亮眼的漸層色 / 截圖自Instagram fb首頁 截圖自EVERNOTE官網 以下就來介紹4個打造炫麗的漸層背景神器，讓你在網頁設計的時候，也能輕鬆追求潮流又不奇怪。 1. WebGradients 網址點我 網站內提供了180款線性的漸層色，只要按下Copy CSS，一鍵就可以輕鬆套用網頁背景，非常方便，網站同時也提供色碼資與PNG檔案下載。 只要在你喜歡的顏色，按一下左鍵，就可以預覽所選擇的背景感覺。 如果你想要得到這些漸層顏色的SKETCH與PSD檔案，可以點擊網頁右上方的下載按鈕，可以自由輸入價格，如果喜歡，也不要吝嗇給予贊助喔！ 2. Unique gradient generator 網址點我 一進網站，所看到的背景就是預覽的結果，透過右上方的設定條件產生出許多不同的漸層背景。 利用x和Y去調出自己喜歡的顏色，Sample area則是範圍大小，也可以利用Randomize隨機產生背景。 另外，介紹一下下方的選單，透過Browse image可以上傳你的照片，而網站所選取的是照片裡的色系，並非是照片本身。 它會自動截取照片裡的某一塊顏色，如果你不喜歡，可以去調整X和Y的位置，就會有不一樣的色塊出現了。 選擇Select source image也是同樣的道理，裡有提供預設的照片，一樣是挑照片裡的色系，再去調整X和Y的位置，也可以利用鍵盤的方向鍵來移動位置。 選好背景色後，按下Generate CSS就可以複製CSS語法，使用在你的網頁裡囉！網站也有提供社群按鈕的分享，喜歡的朋友，也不要吝嗇和你的朋友分享。 3. Ultimate CSS Gradient Generator 網址點我 網站內有提供約137種預設的漸層樣式，網站雖然看似有點陽春，但其實有很多功能喔！ 小編偷吃步，先從預設裡挑一款，再來逐步調整是最快的方式，可以透過hue/saturation和reverse變更顏色，就可以在右上方的Preview看到色彩的變化了。 它的介面和Photoshop很像，非常親民，如果你想新增一個一個中間色，只要點一下，就會出現了。 網站提供了5種漸層的呈現方式可以變更，如果調整完成，也可以把這組顏色儲存起來，另外，網站也有提供CSS語法可以直接複製使用。 網站還提供import css與import image的方法。 照片匯入一樣是抓取照片的色系，另外要特別注意圖檔的大小，如果過大會發生錯誤。 4. CSS Gradient Background Maker 網址點我 網站的使用方式也蠻簡單的，也是比較陽春的網站。 網站提供Linear、Circular與Elliptical三種漸層模式，而每一種模式又有不同的顯示方式可以選擇，就能變化出很多種可能。只要選擇開始和結束的顏色，中間變化的顏色電腦會幫你算出來。 當然你也可以按下Add Stop選擇加入幾個顏色，在Offest欄位可以改變數值，去調整漸層顏色的位置，就可以調出不一樣的漸層，最後，也提供了CSS語法方便使用於網站上。 客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w
Photoshop Beta版🖥️生成填充工具
今天要來跟大家介紹覺得Generative Fill的生成工具，Generative Fill本身是屬於Adobe Photoshop的Beta版本，他的功能非常強大，擴張圖片、新增元素，快速完成客戶需求...
本網站使用相關網站技術以確保使用者獲得最佳體驗，通過使用我們的網站，您確認並同意本網站的隱私權政策。欲了解詳情，請參閱 隱私權政策。
zoom教室下載
