Bi n i hình en tr ng sang màu. Chuy n i hình nh en tr ng sang hình nh màu là m t vi c không th thi u trong l)nh v,c nhi p nh. Chúng ta dùng l nh Variations làm thay i toàn b tone xám sang ch màu.
Thao tác th$c hi n:
− Ch n l p nh c n áp d ng.
− Nh p chu t lên nh ng ô m#u màu.
− Ch n OK.
Chú ý:
− Khu v,c có hai ơ m#u n m trên cùng:
Original: M#u hình nh ban u Current pick: m#u hình nh k t qu
− T ng gi m màu:
More green: Thêm màu xanh l c More yellow: Thêm màu vàng More Red: Thêm màu
More Magenta: thêm màu xanh d ng More Blue: thêm màu xanh da tr+i
− Khu v,c có 3 ơ m#u n m bên ph i giúp ta thay i sáng
t(i. Lighter: thêm s c sáng. Darker: thêm s c t(i. Current Pick: K t qu i u ch!nh sáng t(i.
III.4. Ví D' Hi u Ch0nh nh Màu: Yêu C u:
Th$c hi n:
B c 1: Chu"n b* hình nh
B c 2: Chuy n i màu chai n c
− Ch n menu Image, Adjustment, Brightness and Contract
− Nh p giá tr* Brightness = -35, contract = 15
− Ch n cơng c Erase xố vùng nh th a.
B c 3: Chuy n i màu áo
− Ch n công c lasso tool, tao vùng ch n quanh vùng áo.
− T o vùng ch n trên vùng hình nh en tr ng. − M m i Canvas cùng kích th c v i vùng ch n. − Dán n i dung nh chép vào Canvas m i. − Ch n công c Lasso t o vùng ch n quanh cái chai − Nh p ph i chu t lên Layer v a t o. Ch n Layer via copy.
− t tên l p là: chai
− Ch n Menu Image,
ch n Adjustment,
ch n Color Balance
− T ng giá tr* màu Blue
− Ch n cơng c Erase xố ph n th a
B c 4: Hi u ch!nh c áo
B c 5: Chuy n i màu Tóc
− L u ý: Khi th,c hi n chuy n i màu tóc trong tr +ng h p này chúng ta ph i ch n luôn ph n nh n n gi c nguyên v3n tóc mai.
− Ch n úng layer
Anhbandau, nh p ph i lên layer này ch n
Layer via copy. t
tên l p m i là Ao. − Ch n menu Image, ch n Adjustment, ch n Color Balance. − Hi u ch!nh giá tr* màu:Geen = 100; Cyan= -60. − Th,c hi n bi n i c áo t ng t, nh màu áo. − Thi t l p các thông s( v i các giá tr*: Cyan = -100 Green = 60 Blue = 100. − Ch n công c Erase Xóa vùng th a.
B c 6: Chuy n i màu vùng da m t
− Th,c hi n xoá các ph n th a quanh vùng da m t. Ch n công
c blur tool nh p ch n vùng da m t t ng m*n vùng m t. − Th,c hi n chuy n màu c&ng t ng t, nh màu áo, v i các thông s( xác l p nh sau: Red = yellow = 100, Green = 5. Sau ó ch!nh vùng hightlights v i Red=20; Yellow = 40. − Ch n Menu Image, ch n Adjustment, ch n Brightnes and contract v i giá tr* là -50 và 15. − Th,c hi n t o vùng ch n và t o l p m i cho vùng m t t ng t, nh t o l p áo và l p này có tên là Mat. − Th,c hi n ch n Menu Image, ch n Adjust-, ch n Color Balance v i các thông s( sau: R= 100; M = -15 Y = - 85. B c 7: i màu môi − Th,c hi n i màu vùng môi t ng t, nh các vùng màu khác dùng ch c n ng Hue Saturation v i các thông s(: ch n Colorize, Hue = 360, saturation = 40, Brightness = 21.
B c 8: i màu m t: − Th,c hi n chuy n màu con m t t ng t, nh các chuy n màu các vùng nh khác, thông s(: Blue = 30, Green = 45. − Tinh ch!nh l i t t c các thành ph n cu(i cùng. − Xem nh k t qu .
IV. BÀI T P CH NG 4: Bài T p 4.1:
Ch ng 5: THI<T K< GIAO DI N WEBSITE
Website là m t ng d ng ch y trên m ng(Client-Server), c chia s2 kh p toàn c u. Thông qua Website ng +i ta có th chia s thông tin, d li u, trao i hay mua bán hàng hóa, d*ch v mà nh ng khách hàng và ng +i ch$ không c n thi t ph i g p nhau t n m t.
Ngày nay khi thi t k m t Website, ng +i ta th +ng s d ng Table trình bày Layout cho các Webpage. ây là m t thu n l i trong vi c b( c c hình nh.
Ch ng này chúng ta s nghiên c u các n i dung chính:
− Gi i thi u v Website.
− M(i quan h gi a thi t k h a và thi t k Website.
− Xác *nh kích th c các thành ph n c$a Website.
− Thi t k giao di n Website.
I. GI I THI U WEBSITE I.1. Ví D'
I.2. Các Thành Ph n C a M t Web Pages
Khi quan sát m t Webpage, chúng ta th +ng b t g p các thành ph n sau:
− Banner: Bannner trên !nh, th +ng ch a Logo, hình nh và tiêu c$a Website.
− Left Menu: Vùng menu bên trái thông th +ng c phân chia thành các menu con ch a các ch c n ng chính c$a Website. Th +ng khi m%i menu con s ch a m t hình nh làm nh n n.
− Right Menu: Vùng menu bên ph i th +ng hi n thông tin v n t t. Menu này th +ng th hi n d ng khung hình r ng, và có các th hi n c tr ng riêng cho n i dung.
− Containt Area: Vùng hi n th* n i dung chính c$a t ng ch c
n ng khi c ch n. vùng này v i trang ch$ th +ng có m t
hình nh làm background.
I.3. M)i Quan H Gi?a Thi!t K! 1 H a và Thi!t K! Website
Ngày nay, v i s, phát tri n không ng ng c$a khoa h c máy tính, thì vi c trao i và qu ng bá thông tin s khơng cịn n i u ch! là v n b n nh tr c kia n a. H u h t các n v*, các c quan và các t ch c, cá nhân u có th cung c p thơng tin c$a mình
thơng qua các Website. Nh ng nó s th t nhàm chán khi ng +i c
ch! th y c r ng Website ch! toàn là v n b n. Nh ng may m n thay dù ít hay nhi u Website nào c&ng có hình nh minh h a (ch! lo i tr nh ng trang thơng tin mang tính ch t thơng báo).
T ó, chúng ta th y r ng hình nh ln c n có trong Website, và c&ng chính hình nh ã t o nên c ti ng nói riêng cho t ng Website, thu hút s, chú ý và chi m c m tình t phía ng +i c. M t trang Web hay không th thi u nh ng hình nh 3p, ng th+i thông qua các Website ng +i ta c&ng mu(n g i g m nh ng thông tin, thông i p thơng qua hình nh ch khơng ph i lúc nào c&ng di1n t b ng l+i, b ng v n b n.
Do ó gi a hình nh và Website có m t m(i quan h g n khó có th tách r+i nhau. chúng góp ph n cùng nhau chuy n t i thông tin m t cách rõ ràng và có hi u qu th,c th n ng +i c.
Web c n hình nh và hình nh c&ng c n có Web.
II. QUAN SÁT KÍCH TH C CÁC THÀNH PHNN
ây c xem là giai o n phác th o trên gi y, nh ng là m t giai o n c,c k/ quan tr ng, nó s giúp cho chúng ta bi t c chính xác kích th c c$a t t c các thành ph n trong Web page tr c khi chính th c ng i thi t k giao di n c$a Web page b ng
ch ng trình Photoshop. Do v y, chúng ta c n ph i n m c kích
th c c$a các thành ph n sau:
II.1. Xác %nh Kích Th c T ng Th C a Webpage
− Xác *nh kích th c ngang.
− Xác *nh kích th c ng.
− Thơng th +ng kích th c t ng th c$a Webpage là 800 pixel
II.2. Xác %nh Kích Th c Banner
− Xác *nh kích th c ngang c$a Banner.
− Xác *nh kích th c ng c$a Banner.
− Quy t *nh chia Banner ra thành bao nhiêu nh thành ph n.
− Kích th c ngang và ng c$a m%i nh thành ph n.
II.3. Xác %nh Kích Th c Left Menu
− Xác *nh kích th c ngang c$a Left Menu.
− Xác *nh kích th c ng c$a Left Menu.
− Quy t *nh chia Left Menu ra thành bao nhiêu Menu con.
− Thông th +ng t i m%i Menu ng +i ng +i ta th +ng g n m t
Image cho Menu. Do ó c n xác *nh kích th c ngang và
ng c$a m%i nh thành ph n.
II.4. Xác %nh Kích Th c Right Menu
− Xác *nh kích th c ngang c$a Right Menu.
− Xác *nh kích th c ng c$a Right Menu.
− Quy t *nh chia Right Menu ra thành bao nhiêu Vùng, kích
th c ngang và ng c$a m%i vùng là bao nhiêu.
− Thông th +ng t i m%i vùng ng +i ng +i ta th +ng g n m t
Image làm n n cho vùng ó và th +ng là khung hình. Do
ó c n xác *nh kích th c ngang và ng c$a m%i nh thành ph n dùng làm khung n n.
II.5. Xác %nh Kích Th c Vùng N i Dung
− ây là vùng dùng hi n th* n i dung khi các thành ph n
ch c n ng khi c ch n.
− C n xác *nh c kích th c ngang và kích th c ng c$a
nh n n cho vùng n i dung n u có.
− Quan tâm thêm xem vùng nh n n có chia nh nh ra thành
nhi u nh con không.
III. THI<T K< GIAO DI N WEBSITE
thi t k giao di n Website chúng ta th,c hi n theo các b c sau:
− B c 2: Chu"n b* hình nh.
− B c 3: Phác th o, xác *nh kích th c các thành ph n. − B c 4: Ti n hành thi t k giao di n Website trên máy.
− B c 5: Tinh ch!nh l i các thành ph n l n cu(i. − B c 6: K t xu t hình nh.
IV. K<T XUFT HÌNH NH
IV.1. K!t Xu2t Hình nh Th Cơng
Trong cách này b n ph i th,c hi n t t c m i vi c b ng công c c$a Photoshop t vi c xây d,ng, n vi c k t xu t hình nh.
− B c 2: Thi t k các thành ph n
− B c 3: Chia khung hình thành 2 file.
Ví d': T o m t
khung hi n th* thông tin cho vùng Right Menu v i tên Thông Báo. Trong ph n thi t k này tôi gi
thi t khung hình c hi n th* trong Table. B c 1: Thi t k khung hình kích th c 250x200 pixel Fil e 1 k ích th c 2 50 x 4 0 p ix el Fil e 2 k ích th c 2 50 x 1 60 p ix el
− B c 4: T m%i File ta k t xu t th$ công sang *nh d ng *.gif b ng ch c n ng File, Save for Web.
IV.2. K!t Xu2t Hình nh T$ ng
V i cách này chúng ta th,c hi n theo hai giai o n chính nh sau:
Giai ,o n 1: Thi t k hình nh trên Adobe Photoshop.
− B c 2: Thi t k các thành ph n
−
Giai ,o n 2: Chuy n
sang hi u ch!nh hình nh trong Adobe ImageReady r i k t xu t sang *nh d ng HTML.
Ví d': T o m t khung
hi n th* thông tin cho vùng Right Menu v i tên Thông Báo. − B c 1: Thi t l p Khung: 250 pixel x 200 pixel − B c 3: Dùng công c Slice kích th c 250 pixel x 40 pixel, chia theo ph n trên − B c 4: Ch n ch c n ng Zoom to ImageReady cu(i thanh công c , xu t hi n khung hình. − B c 5: Ch n ch c n ng File, ch n Save optimazed As. Ch n m c *nh là HTML.
− Ch ng trình s t, ng phát sinh ra m t Webpage và t, ng c t khung hình ra thành nh có *nh d ng *.gif, v i hai tên: tênfile_01.gif và tênfile_02.gif l u trong folder Image cùng th m c v i th m c ch a file HTML.
V. T7I U HĨA HÌNH NH CHO WEBSITE
Trong ph n này chúng ta bàn n m t v n h t s c quan tr ng, chính nó c&ng góp ph n cho vi c trang Web c Load lên nhanh hay ch m, ó là:
N u m t website ch! ch a tồn hình nh khơng c&ng làm cho Wbsite Load ch m. Do ó c n cân nh c s( l ng hình nh có trên Website bao nhiêu là v a, ph n nào có th thay th hình nh c. Ví d ngày nay th +ng Left Menu ng +i ta th +ng t o Menu ng ch r t ít dùng hình nh là n n cho menu con.
ng m t hình nh có kích th c q l n, th +ng ng +i
ta s chia nh này ra làm nhi u ph n có kích th c nh h n.
Ch n m t chu"n nén nh h p lý. Th +ng thì hình nh hi n tr* trong web c t o ra có th l u hay *nh d ng là: *.jpg ho c *.gif. Nh ng ng +i ta th +ng ch n chu"n *.gif do chu"n này c nén t(t h n nên nó có kích th c nh h n.
Xác *nh úng h màu dùng hi n th* hình nh trên Web. Có
hai h màu chính th +ng c dùng là CMYK và RGB. CMYK
thì dùng in tách màu cịn chíng RGB thì m i c dùng hi n
th* trên các thi t b* hi n th*.
Bài T p 5.1:
Thi t k giao di n Website Khoa Qu n Tr* Kinh Doanh.
S d ng Adobe Images Ready t o dòng ch Khoa Qu n Tr* Kinh Doanh i màu t n vàngvà ng c l i.
Bài T p 5.2: K t gi a CorelDRAW và Photoshop thi t k Layout:
MCC LCC:
Ch ng1: CÁC THAO TÁC C8 B'N C9A PHOTOSHOP ..................1
I. GI:I THI;U ADOBE PHOTOSHOP ...........................................2
I.1. Khái Ni m.................................................................................2
I.2. c i m C$a Ch ng Trình Adobe Photoshop ....................2
I.3. Khái Ni m 'nh Bitmap............................................................2
I.4. Khái Ni m Ph n T i m 'nh Pixel.......................................2
I.5. Phân Gi i Màn Hình ...........................................................3
I.6. Phân Gi i T p Tin...............................................................3
I.7. Yêu C u Ph n C ng .................................................................3
I.8. Ph ng Pháp Cài t Ch ng Trình........................................3
II. KH4I <NG CH08NG TRÌNH ADOBE PHOTOSHOP .........4
III. GIAO DI;N C=A S> ADOBE PHOTOSHOP..........................4
III.1. Gi i Thi u C a S Giao Di n CS3........................................4
III.2. Các Thành Ph n Trên C a S Giao Di n ..............................4
IV. CÁC THAO TÁC TRÊN T?P TIN ............................................6
IV.1. M M i T p Tin ....................................................................6
IV.2. M M i T p Tin Có Thu c Tính Bi t Tr c ........................7
IV.3. M T p Tin Có S.n ...............................................................7
IV.4. L u T p Tin L n u ............................................................8
IV.5. L u T p Tin V i N i Dung C&...........................................10
IV.6. L u T p Tin D, Phòng........................................................10
IV.7. L u T p Tin Theo *nh D ng Web ....................................10
IV.8. Duy t File ............................................................................10
V. THỐT KH@I CH08NG TRÌNH PHOTOSHOP....................11
VI. CÁC THAO TÁC TRÊN C=A S> GIAO DI;N ......................11
VI.1. H p Công C .......................................................................11
VI.2. Hi n 5n Các Thành Ph n Trên C a S Giao Di n .............13
VI.3. Thao Tác Trên Màu Background và Foreground ................13
VI.4. Các Thao Tác Bi n i Hình 'nh ......................................15
VII. CÁC THAO TÁC TRÊN VÙNG CHAN .................................20
VII.1. CHÚ Ý................................................................................20
VII.2. S D ng Nhóm Marquee T o Vùng Ch n ...................20
VII.3. S D ng Nhóm Lasso Tool T o Vùng Ch n ...............21
VII.5. S D ng Công C T o V n B n T o Vùng Ch n........23
VII.6. Thao Tác Hi u Ch!nh Vùng Ch n......................................23
VII.7. Thao Tác Sao Chép và Di Chuy n Vùng 'nh c Ch n26 VII.8. Bi n i Hình 'nh B ng Menu L nh................................27
VIII. BÀI T?P CH08NG 1:............................................................32
Ch ng2:CÁC THAO TÁC NÂNG CAO C9A PHOTOSHOP ...........39
I. LAYER - L:P BI T0CNG.......................................................40
I.1. Khái Ni m L p (i T ng ....................................................40
I.2. Gi i Thi u Palettes Layer.......................................................40
I.3. Các Thao Tác Trên L p..........................................................40
II. KÊNH MÀU- CHANNEL..........................................................51
II.1. Khái Ni m Kênh....................................................................51
II.2. Gi i Thi u Palettes Channel..................................................51
II.3. Các Thao Tác C B n Trên Kênh.........................................52
II.4. CácThao tác nâng cao trên kênh ...........................................54
III. CHD < MASK – MET NF.....................................................56