Customise Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.

No cookies to display.

品牌形象設計,花,解析度,網頁設計,品牌顧問,推薦,色彩學,印刷,數位,CMYK,RGB,Color

數位設計/網頁設計V.S.印刷 – 數位設計師必讀的規格、解析度、尺寸比較

( 圖左:印刷設計、圖右:網頁設計 )
在數位設計的專業內容中,工作範圍常需要跨領域,特別是行銷計劃中常出現網頁設計與印刷設計間交換轉檔的橋接工作,在以電腦為工具的數位時代,跨越平面與數位,設計師的界線已經不存在。設計師若是只能瞭解實體/數位印刷與虛擬/數位設計的某ㄧ邊,也容易被誤以為專業不足。

2.5D 品牌顧問,經心整理ㄧ份圖文比較,讓設計師輕鬆瞭解網頁設計與數位印刷的差異,也方便查找,數位設計的相關基本規格:

網頁設計,品牌顧問,推薦,色彩學,印刷,數位,CMYK,RGB,Color
( 圖左:CMYK色彩模式、圖右:RGB色彩模式 )

1. 色彩模式 Color Model

• 印刷設計 / 使用CMYK

Cine青、Megenta洋紅 、Yellow黃與Black黑,使用於印刷、色料…等:屬性為色料4原色,屬於減色法,色料增加的越多則彩度越低、明度越低。

• 網頁設計 / 使用RGB

RED紅(光)、 Green 綠(光)、Blue藍(光),使用於螢幕、電視與舞台燈光…等;屬性為色光3原色,屬於增色法,色光增加越多則彩度越低、明度越高。

花,解析度,網頁設計,品牌顧問,推薦,色彩學,印刷,數位,CMYK,RGB,Color
( 圖左:印刷解析度、圖右:網頁設計解析度 )

2. 解析度 Resolution

• 印刷設計解析度設定為:300dpi(通用解析度)
dpi(dots per inch) / 使用於印刷

印刷製程以網線(Line)為單位,而通用印刷機解析度為150lpi(line per inch)~175lpi,因此設定數位印刷影像檔案解析度為2倍即300 dpi(dots per inch),超過2倍以上的高解析度對印刷品解析度來說實無助益。

• 網頁設計 / 解析度設定為:72ppi
ppi(point per inch) 使用於數位互動與網頁設計

尺寸,紙材,螢幕,網頁設計,品牌顧問,推薦,色彩學,印刷,數位,CMYK,RGB,Color
( 圖左:紙材尺寸、圖右:螢幕尺寸 )

3.尺寸(材料、版面)Standard Size

• 印刷設計紙材尺寸(300dpi)

[ 四六版 ](300dpi)
全開 786x1091mm
對開 545x786mm
四開 393x545mm
八開 272x393mm
十六開 196x272mm
三十二開 136x196mm
六十四開 98x136mm

[ 菊板 / 影印紙 ](300dpi)
菊全開 / A1  594x842mm
菊對開 / A2  421x594mm
菊四開 /A3  297x421mm
菊八開 /A4  210x297mm
菊十六開 / A5  148x210mm
菊三十二開 / A6  105x148mm
菊六十四開 / A7  74x105mm

[ 其他影印紙 ](300dpi)
Letter 8 ½” x 11″
B0 1000x1414mm
B1 707x1000mm
B2 500x707mm
B3 353x500mm
B4 250x353mm
B5 176x250mm

[ 沖、印相片尺寸 ](300dpi)
3″ x 5″
4″ x 6″
5″ x 7″
8″ x 8″
8″ x 10″
8.5″ x 11″
9″ x 16″
11″ x 14″
16″ x 20″
20″ x 30″

• 網頁設計尺寸(72ppi)

網頁設計依裝置螢幕的解析度不同與像素日漸提升而有多種“繁雜”的尺寸規格,以下列舉幾種較常使用規格:

[ 桌上型電腦、筆記型電腦 ](72ppi)

1440p Width, 1024p Width, 800p Width, 600p Width, 400p Width…等,並依電視、電腦螢幕寬度有不同尺寸設定。

[ 行動裝置尺寸 ](最低72ppi)

[ 蘋果 iPhone ]
iPhone 7 Plus: 1080p × 1920p(401ppi)
iPhone 7: 750p × 1334p(401ppi)
iPhone 6 Plus: 1020p × 1920p(401ppi)
iPhone 6: 750p × 1334p(326ppi)
iPhone SE: 640p x 1136p(326ppi)

[ 蘋果 iPad ]
iPad Pro 12.9″: 2048p x 2732p(264ppi)
iPad Pro 9.7″: 1536p × 2048p(264ppi)
iPad Air / iPad Mini: 1536p × 2048p(326ppi)

[ Android  ](最低72ppi)
Android手機與平板規格同樣“繁雜”,設計師仍需要選定特定品牌尺寸規格與時下通用規格作設計:

[ Android 手機  ]
480p x 800p
540p x 960p
720p x 1280p
1080p x 1920p

[ Android 平板 ]
600p x 1024p
800p x 1280p
1080p x 1920p
1536p x 2048p
1440p x 2560p
1600p x 2560p

網頁設計公司,品牌顧問,推薦,檔案,印刷,網頁設計,TIFF,EPS,JPG, PNG,PDF,GIF,BMP( 圖左:印刷檔案、圖右:網頁設計檔案 )

4. 檔案格式 File Format

• 印刷設計 (CMYK色彩模式)

使用 TIFF, EPS, JPG, PDF 檔案格式。

• 網頁設計 (RGB色彩模式)

使用 JPG, PNG, PDF, GIF, BMP 檔案格式。
(文 / 網頁設計公司 • Studio 2.5D 品牌顧問 )

 

針對 Web 進行最佳化

影像有效壓縮以提高網站速度而不損失品質,通常最大40%的 .jpg壓縮檔是很優化的設定。
使用 WebP 等現代格式可以獲得更好的效能。

 

 

補充:

數位設計檔案格式:

<以下資料來源wikipedia.com>

什麼是.jpg檔(JPEG檔)?

JPEG 是一種常用的數位圖像破損式的圖檔壓縮方法,特別是針對數位攝影圖像作壓縮。 允許在存儲大小和圖像品質之間調節作權衡壓縮。 JPEG 通常可以展現 10:1 的壓縮,圖像質感幾乎沒感覺到損失。 JPEG 自 1992 年推出一直是世界上使用最廣泛的圖像壓縮標準,也是使用最廣用的數位圖像格式,截至 2015 年,每天生成數十億張 JPEG 圖像。

什麼是.bmp檔(BMP檔)?

BMP是一種點陣圖像檔案格式,用於存儲數位圖像於獨立的顯示設備(如圖像顯示卡), 特別是在 Microsoft Windows 和 Mac OS 操作系統上。
BMP 檔案格式能夠存儲單色和彩色的平面圖像,具有各種顏色深度,並且可以選擇使用數據壓縮、alpha 通道和顏色配置。 Windows Metafile 微軟視窗元文件 (WMF) 規範有涵蓋 BMP 檔案格式。

什麼是.tif檔(TIFF檔)?

TIFF(Tag Image File Format),縮寫為 TIFF 或 TIF,是一種用於存儲點陣式圖形與圖像檔案格式,在圖形藝術家、出版業和攝影師中很流行。 TIFF 受到掃描、傳真、文字處理、光學字符辨識、圖像處理、桌面出版與頁面排版應用軟體的廣泛支持。

什麼是.tga檔(TGA檔)?

Truevision TGA,通常稱為 TARGA,是由 Truevision Inc.(現為 Avid Technology 的一部分)創建的點陣式圖形檔案格式。 它是 TARGA 和 VISTA 主機板的原生格式,它們是第一款支持 Highcolor高彩色/Truecolor 真彩色顯示器是 IBM 相容於 PC 的圖形顯卡。 該系列圖形顯卡用於專業計算機圖像合成和 PC 的影片編輯; 因此,TGA 圖像檔案的ㄧ般解析度與 NTSC 和 PAL 影片格式相匹配。

什麼是.psd檔(PSD檔)?

Adobe Photoshop 軟體是由 Adobe Inc 創建,所創建的檔案為PSD圖像檔或.psd檔 Photoshop是相容於Windows 和 macOS 開發與發佈的點陣圖形編輯軟體。 它最初由 Thomas 和 John Knoll 於 1987 年創建。
Photoshop 可以在多圖層中編輯和合成點陣圖像,並支持遮色片、alpha 通道合成和多種顏色模型…等功能。 Photoshop 使用自己的 PSD 和 PSB 檔案格式來支持這些功能。

什麼是.gif檔(GIF檔)?

GIF檔翻譯為圖形交換格式(Graphics Interchange Format )是一種點陣圖像格式,由美國在線服務提供商 CompuServe 的計算機科學家 Steve Wilhite 領導的一個團隊開發出來的檔案格式,並於 1987 年 6 月 15 日發布。由於其在應用程式和操作系統之間的廣泛支持和可移植性,它在網際網路上得到廣泛使用。GIF格式支援每個圖像的像素最多 8 位元,從而允許單個圖像引用其自己的調色板,該調色板最多可從 24 位元 RGB 色彩空間中選擇 256 種不同的顏色。

什麼是.png檔(PNG檔)?

PNG檔翻譯為可攜式網路圖像(Portable Network Graphics) 支持基於調色板具有 24 位 RGB 或 32 位 RGBA 顏色的調色板的圖像、灰階圖像與帶或不帶透明度的 alpha 通道和全色非基於調色板的 RGB 或 RGBA 圖像。 PNG 工作組設計了用於在 Internet 上傳輸圖像的格式,而不是用於專業質量的印刷圖形; 因此不支持 CMYK 等非 RGB 顏色空間。

什麼是.eps檔(EPS檔)?

EPS檔(英文Encapsulated PostScript) 翻譯為封包的發佈語法檔是一種符合發佈語法/PostScript檔案格式的檔案結構約定 (DSC/Document Structuring Convention),可用作圖形檔案格式。 該格式早在 1987 年就由 Adobe 的創始人 John Warnock 和 Chuck Geschke 以及 Aldus 開發。 Adobe Illustrator 圖稿檔案格式的早期版本的基礎是由 EPS 和 DSC 開放結構化約定形成的。EPS 文件或多或少是自包含的、可合理預測的 PostScript 檔案,用於描述圖像或繪圖,並且可以放置在另一個 PostScript 檔案中。 EPS 文件本質上是一個 PostScript 程式,儲存為單個文件,其中包含“封包”在其中的低畫數預覽圖,允許某些應用軟體在螢幕上顯示預看。

什麼是.crw .cr2檔(RAW檔)?

RAW檔在檔案的副檔名為 .crw(Camera Raw/ 相機原始圖像) 或.cr2 檔案包含來自數位相機、電影膠片掃描儀器或其他圖像掃描器的圖像的未處理或最少處理的數據資料。RAW檔之所以如此命名,是因為它們尚未經過處理,因此還不能印刷、查看或使用像量圖形編輯軟體進行編輯。 通常,圖像由原始檔轉換器在寬色域內部色彩空間中進行處理,並轉換為可查看的檔案格式(例如 JPEG 或 PNG)以進行存儲、印刷或再處理,可以在其中檔案進行精確調整。 不同的數位圖像取得設備的製造商使用了數十種不同的RAW檔格式。

什麼是.dng 檔(DNG檔)?

DNG檔,Digital Negative 翻譯為數位負片檔是由 Adobe 開發並用於數位攝影的專利、開放、無損原始(RAW)圖像格式。 Adobe 的許可允許有條件免費使用,條件是被許可人在源代碼和文檔中突出顯示文本,說明它是從 Adobe 獲得許可的。 自推出以來發佈的所有 Adobe 照片處理軟體(例如 Adobe Photoshop 和 Adobe Lightroom)都支援DNG。

 

Tags: