.L nh Variations

Một phần của tài liệu giáo trình adobe photoshop - trung tâm công nghệ thông tin (Trang 154)

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

Một phần của tài liệu giáo trình adobe photoshop - trung tâm công nghệ thông tin (Trang 154)

Tải bản đầy đủ (PDF)

(182 trang)