The Nature of Code閱讀心得與Python實作:4.9 Image Textures and ...

閱讀時間約 28 分鐘
這一節的標題是
4.9 Image Textures and Additive Blending
因為方格子標題字數限制,所以沒完整顯現

粒子系統可以用來製作視覺特效(visual effect, VFX),而粒子外觀的呈現方式,以及粒子具有怎樣的紋理(texture),都會影響特效所展現出來的效果。例如,在下圖中可以很清楚地看到,使用兩種不同的粒子紋理所呈現出來的特效效果,就有很大的不同。

raw-image

要賦予粒子不同的紋理,可以直接用程式來寫,不過使用繪圖軟體製作成圖片,會比較節省力氣,畢竟現在的繪圖軟體功能強大,使用上又簡單。

在製作紋理圖片時,首選具備透明度功能的PNG格式。以前面那張圖右手邊,看起來有漸層效果紋理的粒子圖片來說,其製作方式,就是在全白的圖片上,以從中央擴散的方式,讓像素的透明度逐漸增加到完全透明為止。這樣子,當把圖片放到黑色背景上時,就會呈現出漸層的效果。如果圖片不支援透明度功能,就沒辦法呈現出這樣的效果。

製作好圖片之後,就可以利用粒子系統來製作模擬煙霧的特效;不過,在開始寫程式之前,得先搞清楚pygame的混色模式(blend mode, blending mode)。

混色模式指的是,當把不同的顏色混在一起,要透過怎樣的計算方式,來決定最後出現的是什麼樣的顏色。在pygame中,混色模式除了BLEND_PREMULTIPLIEDBLEND_ALPHA_SDL2這兩個比較特殊不在此討論的模式之外,可以由命名方式區分為兩大類,而其主要的差異在於混色時,包含或不包含透明度。

不包含透明度的混色模式

BLEND_ADD, BLEND_SUB, BLEND_MULT, BLEND_MIN, BLEND_MAX

BLEND_RGB_ADD, BLEND_RGB_SUB, BLEND_RGB_MULT, BLEND_RGB_MIN, BLEND_RGB_MAX.

這裡要注意的是,中間有或沒有RGB三個字母,其實是一樣的模式。例如,BLEND_ADDBLEND_RGB_ADD,指的是一樣的模式。

包含透明度的混色模式

BLEND_RGBA_ADD, BLEND_RGBA_SUB, BLEND_RGBA_MULT, BLEND_RGBA_MIN, BLEND_RGBA_MAX

這些模式會利用不同的計算式,來決定混色之後的顏色數值。假設src是來源像素的顏色,而dest是目標像素的顏色,且

0 <= src, dest <= 255

當把src混色到dest而得到顏色c時,各個模式的RGBA值計算式為:

ADD: c = (dest+src) if (dest+src)<=255 else 255
SUB: c = (dest-src) if (dest-src)>=0 else 0
MULT: c = (dest*src+255)//256
MIN: c = min(dest, src)
MAX: c = max(dest, src)

其中MULT模式有兩個比較特別的性質,在接下來的例子中會用到。是怎樣特別的性質呢?從MULT的計算式可以很明顯地看出來,當destsrc有一個是0時,則混色之後的值,就會是0;而當destsrc有一個是255時,則混色之後的值,會是另外那個顏色的值。所以,當我們把一張具備透明度的圖片,以MULT混色模式blit到一張顏色為(255, 255, 255, A)的圖片之後,所得到的圖片,顏色會跟原來的圖片一樣,就只有透明度會改變而已。

pygameblit()fill()方法中,有個special_flags參數,可以用來選擇混色模式。如果不特別指定而使用預設的混色模式,則混色後的顏色,計算方式為:

if destA == 0:
c = src
A = srcA
else:
c = (src*srcA + dest*(255-srcA))//255
A = srcA + destA*(255-srcA)//255

這裡的srcAdestA分別指的是來源像素和目標像素的alpha值,而A則是混色後所得到的alpha值。不過要注意的是,這兩個式子所算出的值,和用pygame所算出的值,可能會有些小小的差距。造成這個小小差距的原因,在於pygame為了加快計算速度,用了很多技巧來避免浮點數運算,但同時也犧牲了一些計算上的準確度。另外,從計算式可以看出來,當目標像素是完全透明時,混色之後得到的會是來源像素,完全無視目標像素的存在。

下面這個例子,就是利用前面那張圖右手邊,看起來有漸層效果紋理的粒子圖片,以混色的方式,來模擬煙霧被風吹動時的效果。

Example 4.8: An Image-Texture Particle System

raw-image

粒子的圖片製作完成之後,可以使用pygameimage.load()來載入。假設圖片檔名是fuzzy-circle.png,程式這樣寫:

img = pygame.image.load("fuzzy-circle.png")

如果要讓img的格式是per-pixel alpha,則載入時需使用convert_alpha(),寫成

img = pygame.image.load("fuzzy-circle.png").convert_alpha()

為了避免在處理時破壞了原本的圖片,所以最好是複製一份副本,然後用這份副本來進行後續的處理工作。要複製圖片,程式這樣寫:

particle_image = img.copy()

另外,為了要讓粒子以更像煙霧的樣子噴出,在設定粒子的初始速度時,不再單純使用亂數來設定,而改用高斯分佈,讓大部分粒子的初始速度集中在給定的mean值附近。這部分的程式這樣寫:

vx = random.gauss(0, 0.3)
vy = random.gauss(-1, 0.3)
velocity = pygame.Vector2(vx, vy)

根據上述的方式,並考量圖片變數的傳遞,原本Particle類別的__init__()方法,要改成這樣:

def __init__(self, x, y, mass, particle_image):
# 取得顯示畫面
self.screen = pygame.display.get_surface()

# 讓傳遞進來的數值來決定particle的質量
self.mass = mass

# 複製圖片並取得圖片尺寸
self.particle_image = particle_image.copy()
self.size = particle_image.get_width()

# 粒子半徑
self.radius = self.size/2

# particle的壽命
self.lifespan = 100

# 讓傳遞進來的數值來決定particle的起始位置
self.position = pygame.Vector2(x, y)

# 讓particle的初始速度呈高斯分佈
vx = random.gauss(0, 0.3)
vy = random.gauss(-1, 0.3)
self.velocity = pygame.Vector2(vx, vy)

# particle的初始加速度
self.acceleration = pygame.Vector2(0, 0)

# 設定particle所在surface的格式為per-pixel alpha
self.surface = pygame.Surface((self.size, self.size), pygame.SRCALPHA)

在這裡,為了要傳遞圖片變數,所以在__init__()方法中,新增了一個particle_image參數。

除了Particle類別的__init__()方法之外,Emitter類別的add_particle()方法也需增加一個參數,用來傳遞圖片變數:

def add_particle(self, particle_image):
self.particles.append(Particle(self.origin.x, self.origin.y, self.mass, particle_image))

要讓噴出的粒子看起來就像煙霧一樣,在將畫有粒子的圖片blit到最後要顯示的畫面上之前,要先把圖片以BLEND_RGBA_MULT的混色方式,blit到全白但有些透明的surface上,藉此在不破壞漸層紋理效果的情況下,調整圖片的透明度。所以,Particle類別的show()方法,要改成這樣:

def show(self):
# 根據particle剩下的壽命長短,以MULT混色模式調整圖片透明度
self.surface.fill((255, 255, 255, self.lifespan))
self.surface.blit(self.particle_image, (0, 0), None, pygame.BLEND_RGBA_MULT)

# 把particle所在的surface貼到最後要顯示的畫面上
center = pygame.Vector2(self.radius, self.radius)
self.screen.blit(self.surface, self.position-center)

主程式以及繪製畫面上方風力指示向量的函數程式碼如下:

def draw_vector(screen, start_pt, end_pt, arrow_size=10):
# 繪製風力指示向量

# 箭頭方向
direction = 1 if end_pt[0] > start_pt[0] else -1

# 箭身
pygame.draw.line(screen, (255, 255, 255), start_pt, end_pt, 2)

# 箭頭上半部
pt_upper = (end_pt[0]-direction*arrow_size, start_y-arrow_size/2)
pygame.draw.line(screen, (255, 255, 255), end_pt, pt_upper, 2)

# 箭頭下半部
pt_lower = (pt_upper[0], start_y+arrow_size/2)
pygame.draw.line(screen, (255, 255, 255), end_pt, pt_lower, 2)


# python version 3.10.9
import random
import sys

import pygame # version 2.3.0


pygame.init()

pygame.display.set_caption("Example 4.8: An Image-Texture Particle System")

BLACK = (0, 0, 0)

WIDTH, HEIGHT = screen_size = 640, 360
screen = pygame.display.set_mode(screen_size)

FPS = 60
frame_rate = pygame.time.Clock()

try:
particle_image = pygame.image.load("fuzzy-circle.png").convert_alpha()
except:
print("無法載入圖片......")
pygame.quit()
sys.exit()

emitter = Emitter(WIDTH/2, HEIGHT-100, 0.5)

# 畫面上方風力指示向量起點
start_x = WIDTH//2
start_y = end_y = 100
start_pt = (start_x, start_y)

while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()

screen.fill(BLACK)

x, y = pygame.mouse.get_pos()

# 風力大小為 -0.2 ~ 0.2
wind = pygame.Vector2(-0.2 + 0.4*(x/WIDTH), 0)

# 畫面上方風力指示向量終點
end_pt = (start_x+0.5*(x-start_x), end_y)

draw_vector(screen, start_pt, end_pt)

emitter.add_particle(particle_image)
emitter.apply_force(wind)
emitter.run()

pygame.display.update()
frame_rate.tick(FPS)

在製作紋理圖片時,除了紋理之外,也要注意圖片的解析度是否合適。在算繪(render)時,解析度越高的圖片會需要越多的計算能力;如果需要動態地改變圖片大小時,更是如此。所以,最好的情況是,使用的圖片大小,就剛好是要呈現在畫面上的大小,這樣在算繪時,就不需要額外再去調整圖片大小,可以加快執行速度。

那如果要呈現在畫面上的圖片大小需要動態地調整,製作圖片時,又該怎麼選擇圖片的大小呢?這時候,要呈現在畫面上的最大尺寸,就是製作紋理圖片時,圖片該有的尺寸。之所以這樣選擇,是為了避免放大圖片,因為放大圖片所需的計算量,會比縮小圖片所需的計算量大。製作紋理圖片時使用最大的尺寸,那在執行程式的過程中,即便需要動態調整圖片大小,也只會需要縮小圖片尺寸,可以避免進行需要較多計算量的圖片放大作業。

Exercise 4.11

使用的粒子圖片

raw-image


效果

raw-image

程式部分。調整粒子y方向初始速度的分佈範圍,讓火焰噴高一點:

def __init__(self, x, y, mass, particle_image):
:
:
vy = random.gauss(-2, 0.3)
:
:

讓粒子不再隨著壽命減短而淡出畫面,把show()方法的第一行程式

self.surface.fill((255, 255, 255, self.lifespan))

改成

self.surface.fill((255, 255, 255, 255))

主程式部分,去除風力的作用,讓火焰向上燃燒。

Exercise 4.12

使用三種不同的粒子圖片

raw-image
raw-image
raw-image


效果

raw-image

主程式

# python version 3.10.9
import random
import sys

import pygame # version 2.3.0


pygame.init()

pygame.display.set_caption("Exercise 4.12")

BLACK = (0, 0, 0)

WIDTH, HEIGHT = screen_size = 640, 360
screen = pygame.display.set_mode(screen_size)

FPS = 60
frame_rate = pygame.time.Clock()

particle_images = []
load_image_failed = False
for i in range(1, 4):
try:
img = pygame.image.load(f"particle-image{i}.png").convert_alpha()
particle_images.append(img)
except:
print(f"無法載入圖片{i}......")
load_image_failed = True

if load_image_failed:
pygame.quit()
sys.exit()

emitter = Emitter(WIDTH/2, HEIGHT-100, 0.5)

# 畫面上方風力指示向量起點
start_x = WIDTH//2
start_y = end_y = 100
start_pt = (start_x, start_y)

while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()

screen.fill(BLACK)

x, y = pygame.mouse.get_pos()

# 風力大小為 -0.2 ~ 0.2
wind = pygame.Vector2(-0.2 + 0.4*(x/WIDTH), 0)

# 畫面上方風力指示向量終點
end_pt = (start_x+0.5*(x-start_x), end_y)

draw_vector(screen, start_pt, end_pt)

# 增加新粒子時,隨機從list中選出一張粒子圖片
emitter.add_particle(particle_images[random.randint(0, 2)])
emitter.apply_force(wind)
emitter.run()

pygame.display.update()
frame_rate.tick(FPS)

最後要特別來看看由Robert Hodgin首創的混色模式:additive blending。這個混色模式的做法其實很簡單,就是在混色時,直接把兩個像素的顏色值相加,如果相加之後的值超過255,那就設定成255。所以,當一層一層畫面不斷混色累加時,顏色會越來越亮,呈現出非常太空時代的發光效果。

Example 4.9: Additive Blending

raw-image

修改Particle類別的show()方法:

def show(self):
img = self.particle_image.copy()
# 改變圖片顏色並依據particle剩下的壽命長短來調整透明度
img.fill((255, 100, 255, self.lifespan), None, pygame.BLEND_RGBA_MULT)

# 利用預設的混色模式來讓圖片顏色變淡
self.surface.fill((0, 0, 0, 1))
self.surface.blit(img, (0, 0))

# 使用ADD混色模式把particle所在的surface貼到最後要顯示的畫面上
center = pygame.Vector2(self.radius, self.radius)
self.screen.blit(self.surface, self.position-center, None, pygame.BLEND_RGB_ADD)

主程式:

# python version 3.10.9
import random
import sys

import pygame # version 2.3.0

pygame.init()

pygame.display.set_caption("Example 4.9: Additive Blending")

BLACK = (0, 0, 0)

WIDTH, HEIGHT = screen_size = 640, 360
screen = pygame.display.set_mode(screen_size)

FPS = 60
frame_rate = pygame.time.Clock()

try:
particle_image = pygame.image.load("fuzzy-circle.png").convert_alpha()
except:
print("無法載入圖片......")
pygame.quit()
sys.exit()

emitter = Emitter(WIDTH/2, HEIGHT-100, 0.5)

# 畫面上方風力指示向量起點
start_x = WIDTH//2
start_y = end_y = 100
start_pt = (start_x, start_y)

while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()

screen.fill(BLACK)

x, y = pygame.mouse.get_pos()

# 風力大小為 -0.2 ~ 0.2
wind = pygame.Vector2(-0.2 + 0.4*(x/WIDTH), 0)

# 畫面上方風力指示向量終點
end_pt = (start_x+0.5*(x-start_x), end_y)

draw_vector(screen, start_pt, end_pt)

# 一次增加三個粒子
for i in range(3):
emitter.add_particle(particle_image)

emitter.apply_force(wind)
emitter.run()

pygame.display.update()
frame_rate.tick(FPS)

Exercise 4.13

修改Emitter類別的add_particle()方法:

def add_particle(self, particle_image, amount=1):
for i in range(amount):
self.particles.append(Particle(self.origin.x, self.origin.y, self.mass, particle_image))

主程式中,一次增加三個粒子的寫法:

emitter.add_particle(particle_image, 3)

Exercise 4.14

raw-image

修改Particle類別的__init__()方法:

# particle的壽命
self.lifespan = 200

# particle的初始速度
vx = random.randint(-2, 2)
vy = random.randint(-2, 2)

# 新增這一行
self.color = random.choice([(255, 0, 0), (0, 255, 0), (0, 0, 255)])

修改Particle類別的show()方法:

# 改變圖片顏色並依據particle剩下的壽命長短來調整透明度
img.fill(self.color+(self.lifespan,), None, pygame.BLEND_RGBA_MULT)

主程式

# python version 3.10.9
import random
import sys

import pygame # version 2.3.0


pygame.init()

pygame.display.set_caption("Exercise 4.14")

BLACK = (0, 0, 0)

WIDTH, HEIGHT = screen_size = 640, 360
screen = pygame.display.set_mode(screen_size)

FPS = 60
frame_rate = pygame.time.Clock()

try:
particle_image = pygame.image.load("fuzzy-circle.png").convert_alpha()
except:
print("無法載入圖片......")
pygame.quit()
sys.exit()

emitter = Emitter(WIDTH//2, HEIGHT//2, 0.5)

while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
sys.exit()

screen.fill(BLACK)

emitter.add_particle(particle_image, 3)
emitter.run()

pygame.display.update()
frame_rate.tick(FPS)


15會員
128內容數
寫點東西自娛娛人
留言0
查看全部
發表第一個留言支持創作者!
ysf的沙龍 的其他內容
在第二章模擬萬有引力時,曾經利用它來設計會吸引物體的吸子(attractor)。現在,如果想要在模擬粒子系統時,加入會排斥物體的斥子(repeller),那要怎麼做呢?
到目前為止,我們所設計的粒子系統,都只有受到重力的作用。那如果作用力是風力呢?又該怎麼設計?
接下來,我們會藉由繼承(inheritance)和多型(polymorphism)這兩個物件導向程式設計的技術,來製作更多樣化、更有趣的粒子系統。
有了描述個別粒子的Particle類別之後,這一節就來看看要怎麼做,才能同時掌握許多粒子的動向,特別是這些粒子的數量是隨時都在變動的。
在開始真正處理粒子系統之前,得先寫個用來描述單一粒子的類別。這個類別,就把它叫做Particle。
之所以要研究粒子系統,除了可以用來模擬許多自然界中的現象之外,另一個更重要的原因是:在我們的模擬世界中,會有許多物體存在,而這些物體可能會形成一群一群的群體
在第二章模擬萬有引力時,曾經利用它來設計會吸引物體的吸子(attractor)。現在,如果想要在模擬粒子系統時,加入會排斥物體的斥子(repeller),那要怎麼做呢?
到目前為止,我們所設計的粒子系統,都只有受到重力的作用。那如果作用力是風力呢?又該怎麼設計?
接下來,我們會藉由繼承(inheritance)和多型(polymorphism)這兩個物件導向程式設計的技術,來製作更多樣化、更有趣的粒子系統。
有了描述個別粒子的Particle類別之後,這一節就來看看要怎麼做,才能同時掌握許多粒子的動向,特別是這些粒子的數量是隨時都在變動的。
在開始真正處理粒子系統之前,得先寫個用來描述單一粒子的類別。這個類別,就把它叫做Particle。
之所以要研究粒子系統,除了可以用來模擬許多自然界中的現象之外,另一個更重要的原因是:在我們的模擬世界中,會有許多物體存在,而這些物體可能會形成一群一群的群體
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
這篇文章主要介紹了繪圖軟體中的色彩模式,包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
Thumbnail
介紹不同的渲染技術和軟體應用,包括戲劇性對比度、虛幻引擎、OC渲染、建築渲染、V射線、3D渲染、PBR等,讓您深入瞭解這些技術對於創造視覺吸引力和真實感的重要性。
Thumbnail
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術,如電影產業中的數位繪景(Matte Painting)。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
Thumbnail
形態學操作在影像處理中有多種應用,特別是在處理二值化影像(黑白影像)。 在影像處理應用上,基本上都由侵蝕,膨脹這兩種方法,組合搭配而成。 常見應用場景 物體檢測與分割: 形態學操作可以用於增強或改善二值化影像中的物體邊界,使得物體的檢測和分割更加準確。
Thumbnail
在數位設計的世界中,我們總是被色彩所包圍,而其中一個關鍵的元素就是色彩描述檔(又稱:描述檔、ICC色彩描述檔)。 它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷!或許你也曾經思考過,當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時,心中
Thumbnail
用photoshop製圖時常會用到混和模式的效果, 但切成網頁圖片時,卻呈現不出來,例如光暈旁邊都會帶黑邊, 最近看到一個css3的混色模式可以達成這樣的效果...
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
本章介紹了 CSS 中的顏色和背景屬性,包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置,以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
這篇文章主要介紹了繪圖軟體中的色彩模式,包括RGB和CMYK的概念和用法。對於網路上使用和印刷的影像處理有很好的指導意義。
Thumbnail
介紹不同的渲染技術和軟體應用,包括戲劇性對比度、虛幻引擎、OC渲染、建築渲染、V射線、3D渲染、PBR等,讓您深入瞭解這些技術對於創造視覺吸引力和真實感的重要性。
Thumbnail
這篇文章介紹了作者的2.5D Camera Projection Mapping效果練習。文中還提供了一些有用的教程資源和相關技術,如電影產業中的數位繪景(Matte Painting)。後記分享了在Unreal遊戲引擎中使用Camera Matte Painting技術的網路教學和研究過程。
Thumbnail
形態學操作在影像處理中有多種應用,特別是在處理二值化影像(黑白影像)。 在影像處理應用上,基本上都由侵蝕,膨脹這兩種方法,組合搭配而成。 常見應用場景 物體檢測與分割: 形態學操作可以用於增強或改善二值化影像中的物體邊界,使得物體的檢測和分割更加準確。
Thumbnail
在數位設計的世界中,我們總是被色彩所包圍,而其中一個關鍵的元素就是色彩描述檔(又稱:描述檔、ICC色彩描述檔)。 它是一個將印表機、螢幕等裝置具備的色域資訊數值化的檔案唷!或許你也曾經思考過,當我們看到[R:0/G:0/B:255]或是[C:100%/M:100%/Y:0%]這樣的數值時,心中
Thumbnail
用photoshop製圖時常會用到混和模式的效果, 但切成網頁圖片時,卻呈現不出來,例如光暈旁邊都會帶黑邊, 最近看到一個css3的混色模式可以達成這樣的效果...