THIẾT kế WEB đồ nội THẤT

Bộ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC HÙNG VƯƠNG THÀNH PHỐ HỒ CHÍ MINH
🙦🙦🙦🙦🙦🙦🙦

BÁO CÁO CUỐI KI
MÔN : THIẾT KẾ ĐỒ HỌA 1
ĐỀ TÀI : THIẾT KẾ WEB ĐỒ NỘI THẤT
SINH VIÊN THỰC HIỆN : BÙI THẾ DANH
VÕ GIA THỊNH
MSSV: 1805CT0036 , 1805CT0044
GIẢNG VIÊN HƯỚNG DẪN : ThS. VÕ THỊ LẮM
KHOA : CÔNG NGHỆ THÔNG TIN
TP.HCM, 26 Tháng 11 năm 2020

1


Lời Cảm Ơn
Để hồn thành đề tài kết thúc mơn học này, em đã nhận được sự hướng dẫn,
giúp đỡ và góp ý nhiệt tình của q thầy cơ trường Đại Học Hùng Vương
tp,hcm và cô Võ Thị Lắm
Chúng em xin gửi lời biết ơn sâu sắc đến cô Võ Thị Lắm đã dành nhiều thời
gian và tâm huyết hướng dẫn nghiên cứu và giúp chúng em hoàn thành báo cáo
ći kì .
Chúng em xin chân thành cảm ơn Ban Giám Hiệu trường Đại Học Hùng
Vương cùng quý thầy cô trong Khoa Công Nghệ Thông Tin đã tạo rất nhiều
điều kiện để em học tập và hồn thành tớt mơn học.
Chúng em đã có nhiều cớ gắng hồn thiện báo cáo ći kì bằng tất cả năng
lực của mình, tuy nhiên khơng thể tránh khỏi nhiều thiếu sót, rất mong nhận
được những đóng góp q báu của q thầy cơ và các bạn.
Tp,hcm , 26 tháng 11 năm 2020

Sinh viên thực hiện
Võ Gia Thịnh
Bùi Thế Danh

2


Nhận xét của giảng viên
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
………………………………………………………………………………………………….
Tp,hcm ,

tháng 10 2019

Chữ ký của giảng viên

MỤC LỤC

3

I.

Tìm hiểu về phần mềm Adobe Photoshop
1. Lịch sử hình thành và phát triển

Adobe Photoshop (thường được gọi là Photoshop) là một phần mềm chỉnh sửa đồ
họa được phát triển và phát hành bởi hãng Adobe Systems ra đời vào năm 1988 trên
hệ máy Macintosh. Photoshop được đánh giá là phần mềm dẫn đầu thị trường về
sửa ảnh bitmap và được coi là chuẩn cho các ngành liên quan tới chỉnh sửa ảnh. Từ
phiên bản Photoshop 7.0 ra đời năm 2002, Photoshop đã làm lên một cuộc cách
mạng về ảnh bitmap. Phiên bản mới nhất hiện nay là Adobe Photoshop CC.
Ngồi khả năng chính là chỉnh sửa ảnh cho các ấn phẩm, Photoshop còn được sử
dụng trong các hoạt động như thiết kế trang web, vẽ các loại tranh (matte painting và
nhiều thể loại khác), vẽ texture cho các chương trình 3D... gần như là mọi hoạt động
liên quan đến ảnh bitmap.
Adobe Photoshop có khả năng tương thích với hầu hết các chương trình đồ họa khác
của Adobe như Adobe Illustrator, Adobe Premiere, After After Effects và Adobe
Encore.
Từ thuở niên thiếu, hai anh em Thomas Knoll và John Knoll đã thành thạo kỹ thuật xử
lý ảnh trong buồng tối, do ảnh hưởng bởi niềm đam mê nhiếp ảnh của người cha Glenn Knoll, giáo sư Đại học Michigan. Hai cậu Thomas và John cũng u thích việc
lập trình trên máy tính Apple II.
Xúc cảm từ nghệ thuật nhiếp ảnh tác động đến việc chọn nghề của Thomas và John.
Thomas theo ngành khoa học máy tính tại Đại học Michigan, ln quan tâm đến
những giải thuật xử lý ảnh (thu nhận từ máy quét). Khác với người anh, John tìm đến
Đại học Southern California, theo ngành điện ảnh.
Năm 1987, trong khi Thomas đang thực hiện luận án tiến sĩ về xử lý ảnh, John tốt
nghiệp đại học và tìm được việc làm "trong mơ" tại Công ty ILM (Industrial Light and
Magic), nơi chuyên thực hiện kỹ xảo hình ảnh cho các xưởng phim ở Hollywood.

4


Khi thực hiện luận án, Thomas thử nghiệm nhiều giải thuật xử lý ảnh trên máy tính
Mac (Macintosh). Máy Mac vào lúc đó dùng màn hình đơn sắc, khiến anh phải nghiên
cứu giải thuật giả lập sắc độ xám để hiển thị được ảnh "đen trắng" trên màn hình.
Thomas đặt tên cho tập hợp các chương trình nhỏ của mình là Display.
Trong một lần về thăm nhà ở Michigan, John nhận thấy Display có nhiều nét giống với
phần mềm xử lý ảnh mà anh thường dùng trên máy tính Pixar đắt tiền tại ILM. Khơng
thể đứng ngồi "cuộc chơi", John tham gia vào việc phát triển phần mềm Display, tự
tạo thêm hoặc đề nghị Thomas tạo thêm các chức năng mới cho Display giúp ích cho
việc làm phim ở ILM.
John đề nghị Thomas đổi tên Display đơn giản thành tên khác, hấp dẫn hơn. Lúc đầu
cả hai chọn tên ImagePro, sau đổi thành PhotoLab, cuối cùng nhất trí chọn tên
PhotoShop, một tên chưa ai dùng. Tuy nhiên, khi John đề nghị thương mại hóa
PhotoShop, Thomas lại e ngại vì khơng muốn nhảy vào cuộc kinh doanh trong lúc
luận án còn dở dang.
Tin chắc vào triển vọng của PhotoShop, khi trở lại làm việc tại California, John tìm
cách liên lạc với nhiều cơng ty ở vùng Silicon Valley để tìm kênh phân phối chuyên
nghiệp cho sản phẩm "cây nhà lá vườn" của mình. Vừa thúc giục Thomas tiếp tục bổ
sung chức năng cho PhotoShop, John vừa biên soạn tài liệu hướng dẫn sử dụng. Sau
khi gửi lại tài liệu cùng đĩa mềm PhotoShop tại nhiều công ty, chờ thẩm định và nhận
được nhiều lời từ chối, cuối cùng John cũng đạt được ý nguyện. Công ty Adobe chấp
thuận phân phối PhotoShop với tên gọi Adobe Photoshop (Shop được sửa thành
shop).
Để hoàn thiện Photoshop trước khi phát hành, hai chuyên viên của Adobe - Steve
Guttman và Russell Brown - đề nghị với John nhiều sửa đổi về cấu trúc và giao diện
của phần mềm. John truyền đạt lại cho Thomas ở Michigan qua điện thoại. Cứ vài
ngày, Thomas lại ra bưu điện, gửi cấp tốc đĩa mềm chứa chương trình vừa chỉnh sửa
cho Adobe (lúc đó chưa phải là thời đại Internet).

2. Lịch sử các phiên bản
Ngày 19 tháng 2 năm 1990, phần mềm Adobe Photoshop 1.0 dùng cho máy Mac, có
dung lượng 728 KB, được phát hành ở dạng đóng gói, gồm một đĩa mềm và tài liệu
hướng dẫn.
Từ năm 1992, khi vai trò chuyên nghiệp của Photoshop đã được xác lập, các phần
mềm khác có chức năng xử lý ảnh tương tự Photoshop (Photo-Paint, Paint Shop Pro
tại Mỹ, Nuances tại Pháp,...) mới xuất hiện.
Đến năm 1995, tập đoàn Adobe mua bản quyền Photoshop từ anh em Knoll.
Kể từ năm 2003, khi Adobe bắt đầu gói tất cả cơng cụ Web và in ấn (bao gồm
Photoshop) vào một gói ứng dụng có tên là Creative Suite, hãng này thường xuyên

5


nâng cấp bộ công cụ này dựa trên ý kiến đóng góp của cộng đồng, tập trung chủ yếu
vào dịch vụ trực tuyến và phân tích web.
Ngày 7 tháng 5 năm 2013 Adobe giới thiệu phiên bản Photoshop CC, chương trình
của Creative Suite do đó đổi thành Adobe Creative Cloud. Bằng cách chuyển sang giải
pháp Cloud người dùng có thể sử dụng các thiết lập cá nhân của mình ở bất cứ nơi
nào Photoshop CC được cài đặt. Các tính năng mới khác bao gồm bộ lọc để giảm hình
bị rung, hình chữ nhật có thể chỉnh sửa trịn góc và xem trước trực tiếp. Kể từ phiên
bản CC Photoshop chỉ có thể mướn, chứ khơng mua đứt nữa.
Trong tháng 6 năm 2014 Photoshop CC 2014 được xuất bản; một năm sau, vào ngày
15 tháng 6 năm 2015 Photoshop CC 2015 ra mắt người dùng.
Ngày 18 tháng 10 năm 2017, hãng ra mắt phần mềm CC 2018.

3. Ứng dụng trong thiết kế
- Photoshop là phần mềm dùng để chỉnh sửa và tạo ảnh dạng Raster (hay còn gọi là
ảnh Bitmap - dùng lưới các điểm ảnh, tức pixel, để biểu thị hình ảnh) với rất nhiều

cơng cụ (tool) từ bút vẽ đến các hiệu ứng tinh chỉnh. Do sử dụng ảnh Bitmap nên
chất lượng và độ phân giải của ảnh trong Photoshop địi hỏi phải cao nếu muốn kết
xuất hình ảnh với kích thước lớn, nếu khơng sẽ dễ xảy ra hiện tượng ảnh bị nhòa,
răng cưa hay còn được gọi là bị “bể” ảnh. Hiện nay, trong chỉnh sửa hình ảnh có lẽ
vẫn chưa ai qua mặt được phần mềm này vì nó có q nhiều cơng cụ tuyệt vời cùng
với hệ thống filter xuất sắc và được rất nhiều hãng thứ 3 hỗ trợ.

6


Photoshop được sử dụng phổ phiến trong lĩnh vực thiết kế
3.1 Chỉnh sửa ảnh bitmap
Chỉnh sửa ảnh: Tất nhiên rồi, điều này thì ai cũng biết cả. Bạn có thể sử dụng PS
để khắc phục được hầu hết những lỗi trên hình ảnh. Photoshop cho phép bạn đổi
màu, thêm bớt, xố bỏ vật thể. Bạn cũng có thể dễ dàng tạo ra những hiệu ứng tuyệt
đẹp bằng photoshop.
Phục chế ảnh cũ: Nếu bạn có những bức ảnh cũ, được chụp từ rất lâu rồi, bạn hồn
tồn có thể phục chế nó. Cho dù chất lượng ảnh suy giảm và hỏng hóc, bạn có thể sử
dụng photoshop để chỉnh sửa và phục chế những bức ảnh này;. biến chúng trở lại
như lúc mới chụp.
Trong nhiếp ảnh và cả các lĩnh vực nghê thuât

7


3.2 Thiết kế với photoshop
Thể hiện sự sáng tạo với chữ(text): Với photoshop bạn có thể sử dụng text biến
chúng thành các tác phẩm nghệ thuật. Việc sử dụng văn bản, sắp đặt tùy biến chúng
tạo thành những hình ảnh có tính biểu tượng cao. Việc sắp đặt text được gọi tắt là
typography.

Thiết kế thời trang: Trong thiết kế thời trang, bạn khơng chỉ có các phần mềm đồ
họa vector. Bạn cũng hồn tồn có thể sử dụng PS trong công việc thiết kế thời trang
một cách hiệu quả

8


II.

Thực hành

1. Đề tài : Thiết kế giao diên Web nôi thât

9


10


11


- Lí do chọn đề tài:
●
●
●
●
●
●
●

●

Mở rộng khả năng tương tác với khách hàng.
Tăng khả năng cạnh tranh cho thị trường Internet
Nhận phản hồi từ khách hàng thuận tiện hơn.
Dễ dàng triển khai kế hoạch marketing.
Thiết kế website giúp doanh nghiệp tiết kiệm chi phí
Cung cấp thơng tin hữu ích cho khách hàng.
Tương tác hỗ trợ khách hàng 24/7
Xây dựng quảng bá và nâng cao tầm thương hiệu

- Màu chủ đạo:
Xanh lá cây đâm có ý nghĩa là màu của thiên nhiên. Nó cho tượng trưng cho
sự phát triển, hịa thuận, tươi mát màu mỡ. Màu xanh lá cây còn mang lại cảm
xúc an tồn. Màu xanh này cịn mang lại sự nhẹ nhàng cho mắt. Màu xanh lá
cây còn mang ý nghĩa của sự phát triển và hy vọng.

- Đối tượng hướng đến:
Website hướng đến mọi đối tượng trong xã hôi, không giới hạn đô tuổi, giai
cấp, nhằm mang đến cho tất cả mọi người những sản phẩm sang trọng, quý
phái, để có thể làm đẹp cho tổ ấm của mọi người.

- Các bước tạo ra giao diên web:
●

Xử lý hình ảnh cho website : Xử lý hình ảnh là bước vô cùng quan trọng
khi thiết kế web với Photoshop. Người thiết kế giao diện web có nhiệm
vụ làm cho hình ảnh phải rõ nét, mới mẻ và độc đáo. Khi upload ảnh lên
website, người thiết kế phải chú ý đến việc sử dụng kích thước hình
ảnh, định dạng file, dung lượng tối ưu để lưu ảnh, đặt tên file ảnh đúng

tiêu chuẩn,… File ảnh luôn nằm trong khung hình chữ nhật hoặc hình
vng. Tùy thuộc vào định dạng mà bạn thiết kế khung này trong suốt
hay không.
Cần chú ý đến phần tiếp giáp giữa nút bên dưới và đường thẳng màu
đỏ. Trong thiết kế layout web bằng Photoshop, khi xử lý ảnh bạn nên
lưu ảnh với kích thước đúng hoặc khơng q lớn. Nên giữ đúng tỷ lệ
hình ảnh và lưu dưới dạng save for web. Không lưu ảnh và folder ảnh
bằng tên có dấu, ký tự đặc biệt hay khoảng trắng.

●

Cắt ghép ảnh cơ bản : Sau khi xử lý hình ảnh, bước tiếp theo là khoanh
vùng trên website. Khi khoanh vùng, cần chú ý để hình ảnh được ghép

12


có sự hài hịa và thống nhất. Sau đó, người thiết kế sẽ tiến hành cắt,
ghép ảnh vào vùng đã khoanh.
● Hiệu ứng và màu sắc : Lựa chọn và phối màu phù hợp sẽ khiến website
trở nên thu hút đồng thời thể hiện được thông điệp mà thương hiệu
muốn truyền tải đến khách hàng của họ. Chính vì vậy, khi thiết kế layout
website bằng Photoshop cần lưu ý về màu sắc và hiệu ứng. Nên sử
dụng màu đủ độ và để những khoảng trắng. Không nên để những màu
mạnh ở gần nhau và sử dụng quá nhiều màu khi thiết kế giao diện web.
● Thiết kế Banner cho website : Thiết kế Banner cho website bằng
Photoshop khá đơn giản. Điều quan trọng là người thiết kế cần chú ý để
Banner phù hợp với website cả về nội dung và hình thức. Như vậy,
website sẽ trở nên sinh động và hấp dẫn người xem hơn.

- Các bước xuất ra trang Web:
● Dùng công cụ Slice Tool để cắt những phần mình muốn giữ lại khi xuất

ra Web

13


● Chọn File � Save for Web

14


● Chọn định dạng JPEG và SAVE

Chọn định dạng save cho ảnh

15


● Chọn thư mục chứa, sau đó chọn save dưới định dạng HTML and

Images

Chọn thư mục muốn lưu vào

16


2. Tạo banner trường Đại Học Hùng Vương TP.HCM

17


3. Tạo flie động

Vào photopshop tạo một layer mới

Vẽ hình muốn tạo flie động ra và tô màu theo ý thít

18


Tạo số lượng layer theo số hình dạng động
.Ở đây là 53 layer

Sau đó vào Window chọn Timeline

19


Trên bản timeline tạo số chuyển động của các hình ảnh trong layer
Chọn thới gian chuyển động ở dưới các bản layer
Nếu muốn chuyển động liên tục chọn no delay
Thêm số Timeline dựa trên số truyển động mong muốn ở đây là 28 chuyển động
Số hành động sẻ được lập lại khi đến cuối trang Timeline cuối cùng

Chọn nút star có hình tam giác để thực hiện chuyển động

20

Lập lại thao tác để dựng chuyển động
Lưu ý: Timeline và layer hoàn toàn khác nhau nếu muốn thay đổi hình ảnh của
chuyển động, chọn trang timeline của chuyển động đó sau đó thay đổi trên layer
Thay đổi một layer của timeline này sẻ ảnh hưởng lên tất cả layer của timeline khác
trên chuyển động đó( hình ảnh được thay đổi)
ẩn một layer của timeline trướt thì các layer tương tự khơng bị ảnh hưởng có thể ẩn
hoặc hiện.

Một ví dụ khác

21