2015年12月26日 星期六

Illustrator 變形小標籤製作

Illustrator 變形小標籤製作,利用簡易的工具先製作基本形狀,
再搭配編輯的方式進行修改與調整,最後就可以製作出變形的小標簽。
做法很簡單,有興趣的朋友可以試看看。

2015年12月13日 星期日

Illustrator 製作咖啡杯

使用Illustrator 製作咖啡杯的教學,因為製作的時間比較長的緣故,所以分為兩段進行。
影片共分為上與下,請點擊下方的影片,或直接連結到以下的網址收看,謝謝!

2015年11月28日 星期六

Illustrator-貝茲曲線教學

學習Illustrator或許可以練習一下鋼筆工具,
鋼筆工具建立路徑的方式是以左鍵單響的方式建立,
若是需要由曲轉直線,可以在轉折錨點上按下左鍵,
可將線段轉成直線。

詳細的內容可以參考這段教學影片喔!

2015年11月18日 星期三

Sublime Text 3 使用 Emmet 快速建立HTML標簽2-網頁設計教學

這篇文章是接續 Sublime Text 3 使用 Emmet 快速建立HTML標簽1的內容,

這此的說明將補充超連結、影像標籤、DIV標籤這三種類型的建立方式。

step1.超連結建立方式

a[page1.html]{連結}

2015年11月6日 星期五

使用 Photoshop 圖層遮色片

Photoshop的遮色片是最基本的影像處理技巧,

在使用時只要記得幾個關鍵功能,就可以完成你想要的功能!

這個“photoshop-圖層遮色片技巧”的影片將帶領你如何使用遮色片技巧。

2015年11月4日 星期三

Illustrator基本概念 形狀模式的操作方式

這是Illustrator圖形組合的概念,透過圖形加減造型的組合,

使用『視窗 / 路徑管理員』的功能視窗,

透過這個功能可以讓我們隨心所欲製作想要的造型!

這個教學影片可以給有興趣學習Illustrator的初學者,

簡單的瞭解圖形的製作概念。

2015年11月1日 星期日

建立HTML表格

表格是網頁設計課程中一門很重要的技巧之一,

因為表格可以收錄網頁的文字與資料內容,

所以部分的網頁資料會以表格為主軸,但是因為這幾年來表格逐漸不被採用,

網頁設計師開始採用項目清單進行編輯,也就是<ul><li>的標籤。

其中的原因我們就不多作敘述,本單元中將會介紹表格的使用方式。

2015年10月31日 星期六

Photoshop 文字效果1

這個範例是很早之前錄製的Photoshop 文字效果1教學,

剛好這幾天在整理資料的時候發現了這段教學影片,

如果想試試這類型的文字效果,或許可以參考做法喔!

2015年10月24日 星期六

CSS學習第一堂課-文字樣式

1.文字大小 font-size

HTML的文字經常都會使用CSS來規範,

適當的大小與文字顏色會對網站的可閱讀性增加,

但文字的大小與顏色通常都要將觀眾的年齡考量進來,

因為25歲以下與30歲到40歲或者是45歲以上的閱讀群,

文字大小與可辨識的色彩會有些微的差異。

我們就以網頁文字的em值來說明,em等於16px的字體,

所以1em的文字大小等於16px的文字大小,

如此一來我們就可以清楚文字大小該如何規範了。

Illustrator-即時上色油漆桶

這段影片是介紹使用Illustrator的『即時上色油漆桶』工具製作三菱的標誌,

可以透過多邊形工具線段區段工具即時上色工具的搭配應用所完成,

最後在使用展開與解散群組的方式就可以完成。

2015年10月22日 星期四

CSS學習第一堂課-淺談選取器

製作網頁首先要了解的是網頁的結構,

HTML是由多個基本的標籤(Tag)所構成,所以了解常用的標籤會對網頁設計有莫大的幫助,

但這篇教學的主角是CSS,所以我們就從CSS的觀念講起。

2015年10月20日 星期二

學習CSS的第一步

CSS文字樣式介紹

HTML搭配CSS是網頁設計必備的技巧,在網頁中加入CSS可以有兩種方式,

一種是直接在頁面中建立樣式,另外一種是新增一個樣式表檔案,

然後再以連結外部檔案的方式使用,以下是這兩種方法的說明。

什麼是CSS

什麼是CSS

CSS樣式表的全名為Cascading Style Sheet

用於規範網頁文字、HTML標籤、表格、影像等網頁元素的語言。

網頁製作的主要語言都是使用HTML標籤構成,

CSS樣式表在網頁中所扮演的角色是針對視覺輔助的呈現,例如定義網頁中文字的色彩、

行距,超連結文字互動效果,表格框線的色彩與樣式、背景色彩等等類型的規範。

2015年10月17日 星期六

Illustraotr 符號與符號噴灑器工具

符號是Illustrator形狀資源中很重要的一個功能,符號除了可以重複使用之外,還可以透過「符號噴灑器工具」進行重複製作與調整。接下來我們就利用一個很簡單的範例,來了解符號與「符號噴灑器工具」之間的運作吧!

2015年10月15日 星期四

IPhone4s與5s UI設計尺寸

製作iphone UI時影像的尺寸設定非常重要,

尤其是status Bar,Navigation Bar,Tab bar都有固定的尺寸。

以IPhone5s為例,status Bar高為20pts、Navigation Bar高為44pts、Tab bar為49pts,

1pts=2px所以換算下來

status Bar高為40px、Navigation Bar高為88px、Tab bar為98px,

實際的內容高度尺寸為1136-(40+88+98)=910px。

以下圖示為 IPhone4s 與 5s 設計尺寸



2015年10月12日 星期一

Illustrator 線條圖筆刷範例


Illustrator 的筆刷效果非常好用,如果運用得宜可以讓你製作圖案的速度加快,還可以讓整個畫面更簡潔美觀。

2015年10月9日 星期五

HTML5版面排版-網頁設計教學

HTML5已經是目前網頁開發必備的標籤語法,想要讓網頁設計的技術不落人後,就必須先從基本的版型結構標籤開始。

在早期HTML4之前我們都是使用DIV標籤進行版型編排,但自從HTML 5之後就增加了版型專有的的標籤,其標籤內容如下:

Illustrator線條圖筆刷製作方法

線條圖筆刷是illustrator常用的功能之一,筆刷的形狀大部分都是設計師自行製作,製作完成後再套入已經製作完成的路徑中,接下來我們就開始製作這個線條圖筆刷的效果吧!

2015年10月6日 星期二

Photoshop 輸出檔案說明


剛開始使用Photoshop之前,瞭解輸出的檔案類型是一件很重要的事,除了可以清楚的知道色彩模式之外,還可以正確設定適當的解析度與單位尺寸。

2015年10月3日 星期六

illustrator 緞帶的做法-Mac版

這個影片要帶領大家透過illustrator 製作簡易的緞帶的做法,作業系統為Mac OS,透過『鋼筆工具』建立路徑的方式並搭配『矩形工具』製作一個緞帶。
詳細的內容歡迎觀看教學影片。



2015年10月2日 星期五

iphone 6尺寸規格

一般我們要開始iOS的UI設計前,必須先注意iPhone的版本與尺寸,以下為目前的iPhone版本與尺寸分別為iPhone 6 Plus, iPhone 6, iPhone 5s, iPhone 5c。

2015年10月1日 星期四

Sublime Text 3 使用 Emmet 快速建立HTML標簽1

Sublime快速變成網頁設計師社群推薦的編輯工具,以下的語法你必須參考 Sublime Text 3 :必要的安裝與設定教學 這篇文章,假如你已經閱讀或者已經有安裝Emmet就可以開始以下的步驟。

Step1:建立基本HTML標籤

第一步:你必須要先把檔案儲存為.html的檔案格式,接下來就可以在Sublime中輸入以下的簡碼。

第二部:當你輸入HTML:5後必須按下「Tab」鍵。

html:5

就可以產生以下的HTML標籤。


Sublime Text 3 :必要的安裝與設定教學

倘若你還沒有安裝sublime可以到以下的網址下載。下載位置:http://www.sublimetext.com/3。

安裝的最簡單的方法是透過Sublime的的控制台。

1.開啟控制台的方式可以按下「CTRL +`」或者是打開選單「view / show console」開啟。

2015年9月27日 星期日

咖啡杯製作

這次的教學我們要使用Illustrator製作一個咖啡杯,製作時的使用工具:橢圓形工具、鋼筆工具。

波形照片合成

Photoshop可以變化出許多效果,這次讓我來介紹如何製作波形照片合成效果,但是製作前必須要先準備兩張照片。

2015年7月14日 星期二

縮放矩形轉角功能 Illustrator CC 2014

2014版的Illustrator圓角矩形會再縮放時會有一些差異,但要如何解決解決圓角矩形縮放的問題呢?