Tình hình nghiên cứu trong chuyên đề “thiết kế chỉnh sửa hình ảnh và giao diện website” hướng đến việc tạo ra trải nghiệm người dùng tốt nhất thông qua sự kết hợp hài hòa giữa hình ảnh và giao diện, đồng thời đảm bảo hiệu suất và tính hiện đại.
Trang 1BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN
Trang 2LỜI CẢM ƠN
Kính gửi: Ban giám hiệu trường Đại học Gia Định
Quý thầy cô khoa Công nghệ thông tin
ThS Nguyễn Ngọc Bích Nga - Giảng viên hướng dẫn Ban lãnh đạo công ty TNHH Ai Cơm Việt Nam
Trong suốt thời gian học tập và rèn luyện tại trường Đại học Gia Định cho đến nay, em đã nhận được rất nhiều sự quan tâm và hỗ trợ của quý thầy cô và bạn bè Với lòng biết ơn sâu sắc và chân thành nhất, em xin gửi đến quý thầy cô ở khoa Công Nghệ Thông Tin, đã tâm huyết truyền đạt kiến thức quý báu của mình trong suốt thời gian em học tập ở trường Đặc biệt em cảm ơn cô Nguyễn Ngọc Bích Nga người đã hướng dẫn và giúp đỡ em trong quá trình thực tập trong môn học này
Và đặc biệt trong học kỳ này, Khoa đã tổ chức cho em tiếp cận với môn học thực tập mà theo em rất hữu ích đối với sinh viên ngành đồ họa kỹ thuật số Giúp em có thể trải nghiệm và tiếp cận được với công việc thực tế của chuyên ngành đồ họa kỹ thuật số
Ngoài ra, em cũng xin bài tỏ lòng biết ơn tới sự chỉ đạo của Ban lãnh đạo công ty TNHH Ai Cơm Việt Nam, nhờ có sự giúp đỡ nhiệt tình của các anh chị trong công ty, đã tạo điều kiện thuận lợi nhất cho em trong suốt thời gian thực tập tại công ty
Với điều kiện và thời gian cũng như kinh nghiệm còn hạn chế của sinh viên như em, bài báo cáo này đôi khi cũng không tránh được những sai sót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các quý thầy cô để em có điều kiện bổ sung lại những thiếu sót và phục vụ tốt hơn cho công việc thiết kế của em trong tương lai
Em xin chân thành cảm ơn!
Trang 3
ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP
1 Thái độ tác phong trong thời gian thực tập:
2 Kiến thức chuyên môn:
3 Nhận thức thực tế:
4 Đánh giá khác:
5 Đánh giá chung kết quả thực tập:
………, ngày ……… tháng ……… năm …………
TM Đơn vị thực tập
(Ký tên, đóng dấu)
Trang 4ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN
1 Thái độ tác phong trong thời gian thực tập:
2 Kiến thức chuyên môn:
3 Nhận thức thực tế:
4 Đánh giá khác:
5 Đánh giá chung kết quả thực tập:
………, ngày ……… tháng ……… năm …………
Giảng viên hướng dẫn
(Ký tên, ghi rõ họ tên)
Trang 5Trường Đại học Gia Định Cộng hoà xã hội chủ nghĩa Việt Nam Khoa Công Nghệ Thông Tin Độc lập - Tự do - Hạnh phúc
BÁO CÁO THỰC TẬP TỐT NGHIỆP HÀNG TUẦN
Họ và tên SV: HUỲNH NGỌC VẠN MSSV: 2108110441 Lớp: K15KTS02
Giảng viên hướng dẫn: ThS NGUYỄN NGỌC BÍCH NGA
Tên doanh nghiệp đến thực tập: CÔNG TY TNHH AI CƠM VIỆT NAM Địa chỉ: 25AB đường Nguyễn Bỉnh Khiêm, Quận 1, Tp.Hồ Chí Minh , Việt Nam
DN
Nhận xét của giảng viên hướng dẫn
1
Tuần 1 (Từ ngày
20/5 đến ngày 24/5)
- Nhận người hướng dẫn
- Làm quen với mọi người trong công ty và tiếp nhận công việc đã hướng dẫn
- Tìm hiểu phong cách thiết kế của công ty
2
Tuần 2 (Từ ngày
27/5 đến ngày 31/5)
- Tìm hiểu về hình ảnh sản phẩm của công ty
- Bắt đầu chỉnh sửa hình ảnh: màu sắc, ánh sáng, bố cục
Trang 63
Tuần 3 (Từ ngày
03/6 đến ngày 07/6)
- Áp hình ảnh đã chỉnh sửa vào trên website
- Kiểm tra lại hình ảnh đã chỉnh sửa trên trang website
- Chỉnh sửa kích thước mã QR Code ngân hàng của công ty
4
Tuần 4 (Từ ngày
10/6 đến ngày 14/6)
- Dán mã QR Code ngân hàng của công ty vào kệ menu mica
- Tìm hiểu những nội dung trên trang web
- Tìm hiểu kích thước của banner web
5
Tuần 5 (Từ ngày
17/6 đến ngày 21/6)
- Thiết kế menu cho cửa hàng công ty
- Thiết kế poster thông báo tuyển dụng nhân viên cho doanh nghiệp
6
Tuần 6 (Từ ngày
24/6 đến ngày 28/6)
- Nghiên cứu thiết kế banner web
- Xác định được kích thước của trang web của công ty
- Tìm ý tưởng để thiết kế
- Thực hành thiết kế banner web ở trang thương hiệu
Trang 77
Tuần 7 (Từ ngày
01/7 đến ngày 05/7)
- Tiếp tục thiết kế và chỉnh sửa lại slider web ở trang thương hiệu - Nghiên cứu bố cục, màu sắc, font
chữ, cho trang web công ty - Chỉnh lại bố cục, màu sắc và font
chữ cho phù hợp với công ty
8
Tuần 8 (Từ ngày
08/7 đến ngày 12/7)
- Tiếp tục thiết kế hình ảnh cho trang chủ
- Tiếp tục thiết kế hình ảnh cho trang nhượng quyền
- Thiết kế poster khuyến mãi món ăn cho công ty
9
Tuần 9 (Từ ngày
15/7 đến ngày 19/7)
- Thiết kế name card
- Hoàn thành trang thương hiệu và trang chủ trên website
10
Tuần 10 (Từ ngày
22/7 đến ngày 28/7)
- Hoàn thành chỉnh sửa hình ảnh
- Hoàn thành hình ảnh trên website
- Thiết kế tờ rơi khuyến mãi bên doanh nghiệp
Trang 8MỤC LỤC
CHƯƠNG 1 GIỚI THIỆU ĐƠN VỊ THỰC TẬP 4
1.1 Giới thiệu chung về công ty 4
1.2 Quá trình hình thành và phát triển 4
1.3 Sứ mệnh và tầm nhìn của công ty Ai Cơm Việt Nam 5
1.3.1 Sứ mệnh 5
1.3.2 Tầm nhìn 5
1.4 Sản phẩm của doanh nghiệp 5
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 6
2.1 Banner web 6
2.1.1 Các hình thức quảng cáo banner 6
2.1.2 Các định dạng banner trên web 7
2.2 Bố cục thiết kế hình ảnh web 7
2.2.1 Các quy tắc thiết kế layout website là gì? 7
2.3 Màu sắc trong thiết kế hình ảnh web 8
2.3.1 Ý nghĩa màu sắc của món ăn 8
2.3.2 Phối màu theo nguyên tắc bánh xe màu sắc 11
2.3.3 Kết hợp màu sắc theo các phong cách khác nhau 12
2.3.4 Sử dụng độ tương phản 13
2.3.5 Gắn kết màu sắc với thương hiệu 13
2.4 Typographic trong thiết kế chỉnh sửa hình ảnh web 14
2.4.1 Khái niệm về typographic 14
2.4.2 Kiểu chữ và font chữ 15
2.4.3 Hệ thống cấp bậc (heading) 15
2.4.4 Căn chỉnh 15
2.4.5 Tương phản 16
2.5 Kích thước chuẩn trong website 16
2.6 Tầm quan trọng của thiết kế hình ảnh đem lại giá trị cho thương hiệu 17
CHƯƠNG 3 THIẾT KẾ CHỈNH SỬA HÌNH ẢNH VÀ GIAO DIỆN HÌNH ẢNH TRÊN WEBSITE 19
3.1 Chỉnh sửa hình ảnh 19
3.1.1 Món cơm xá xíu và cơm gà nướng 19
3.1.2 Canh rong biển 21
3.1.3 Nước uống 21
3.2 Đúc kết kinh nghiệm trong quá trình thực hiện thiết kế chỉnh sửa hình ảnh và bài học rút ra cho bản thân 22
3.2.1 Những khó khăn và thuận lợi trong công việc chỉnh sửa hình ảnh 22
3.2.2 Kinh nghiệm trong thiết kế chỉnh sửa hình ảnh 22
3.3 Thiết kế hình ảnh trên web 23
3.3.1 Trang chủ 23
3.3.2 Trang nhượng quyền 39
Trang 93.4 Đúc kết kinh nghiệm trong quá trình thực hiện thiết kế trang web và bài học rút
4.2 Thiết kế name card 43
4.3 Thiết kế poster tuyển dụng cho doanh nghiệp 44
4.4 Thiết kế poster khuyến mãi 46
4.5 Thiết kế tờ rơi 47
4.6 Đúc kết kinh nghiệm trong quá trình thực hiện thiết kế sản phẩm và bài học rút ra cho bản thân 49
4.6.1 Những thuận lợi và khó khăn trong công việc thiết kế 49
4.6.2 Kinh nghiệm trong thiết kế sản phẩm đã học được 49
CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 50
TÀI LIỆU THAM KHẢO 51
Trang 10Hình canh rong biển ICom 21
Hình nước Atiso hạt chia ICom 21
Hình trang chủ banner slider 1 23
Hình trang chủ bố cục banner slider 1 24
Hình trang chủ màu sắc banner slider 1 24
Hình trang chủ banner slider 2 25
Hình trang chủ bố cục banner slider 2 26
Hình trang chủ màu sắc banner slider 2 26
Hình trang chủ banner slider 3 27
Hình trang chủ banner slider 3 28
Hình trang chủ poster chạy trên slider 1 1 29
Hình trang chủ bố cục poster chạy trên slider 1 30
Hình trang chủ màu sắc poster chạy trên slider 1 30
Hình trang chủ poster chạy trên slider 2 31
Hình trang chủ bố cục poster chạy trên slider 2 32
Hình trang chủ màu sắc poster chạy trên slider 2 32
Hình trang chủ poster chạy trên slider 3 33
Hình trang chủ bố cục poster chạy trên slider 3 34
Hình trang chủ màu poster chạy trên slider 3 34
Hình trang chủ poster chạy trên slider 4 35
Hình trang chủ bố cục poster chạy trên slider 3 36
Hình trang chủ màu poster chạy trên slider 3 36
Hình chương trình khuyến mãi theo tháng 37
Hình bố cục chương trình khuyến mãi theo tháng 38
Hình màu sắc chương trình khuyến mãi theo tháng 38
Hình trang nhượng quyền slider 1 39
Hình trang nhượng quyền slider 2 40
Hình menu 42
Hình name card mặt trước 43
Hình name card mặt sau 43
Hình tuyển dụng chuỗi cửa hàng 45
Hình poster khuyến mãi 46
Hình tờ rơi 48
Trang 11MỞ ĐẦU 1 Tính cấp thiết của đề tài
Trong thời đại kỹ thuật số ngày càng phát triển không ngừng, nhu cầu thẩm mỹ của người tiêu dùng càng cao nên luôn có rất nhiều sản phẩm hấp dẫn và thu hút Biết được điều đó, những nhà doanh nghiệp luôn tìm những cách thức khác nhau để thu hút khách hàng thông qua website, quảng cáo sản phẩm của mình rộng rãi
Để thu hút được khách hàng và nâng cao được giá trị sản phẩm của doanh nghiệp thì việc thiết kế chỉnh sửa hình ảnh và giao diện hình ảnh trên web là một trong những thứ rất quan trọng đối với hầu hết tất cả các doanh nghiệp
Thiết kế chỉnh sửa hình ảnh có tầm quan trọng to lớn trong các lĩnh vực đầu tiên, nó đóng vai trong như một công cụ để nâng cao sức hấp dẫn trực quan của hình ảnh, khiến chúng trở nên hấp dẫn hơn đối với người xem Bằng cách vận dụng các khía cạnh như màu sắc, bố cục, việc chỉnh sửa hình ảnh có thể biến những hình ảnh thông thường thành những nội dung trực quan hấp dẫn
Ví dụ: Một sản phẩm món ăn được chỉnh sửa với màu sắc hấp dẫn sẽ tác động đáng kể đến nhận thức của khách hàng về chất lượng và mong muốn thưởng thức món ăn nhiều hơn
Hơn thế nữa, thiết kế chỉnh sửa hình ảnh hiệu quả là một công cụ truyền đạt bản sắc và giá trị của thương hiệu đến với người khách hàng
Để làm được điều đó, tôi đã vận dụng kiến thức đã học ở trường lớp và nghiên cứu học hỏi thêm, trải nghiệm thực tế ở công ty TNHH Ai Cơm Việt Nam tôi đang làm Tôi đã phát triển hơn về khả
Trang 12web của tôi vào thực tế Tạo ra cho doanh nghiệp những hình ảnh trên web bắt mắt hơn
Đối với sinh viên của ngành thiết kế đồ họa như tôi, để làm được điều đó tôi luôn đặt ra mục tiêu cho đề tài tôi nghiên cứu
2 Tình hình nghiên cứu liên quan tới đề tài
Tình hình nghiên cứu trong chuyên đề “thiết kế chỉnh sửa hình ảnh và giao diện website” hướng đến việc tạo ra trải nghiệm người dùng tốt nhất thông qua sự kết hợp hài hòa giữa hình ảnh và giao diện, đồng thời đảm bảo hiệu suất và tính hiện đại
3 Mục tiêu và nhiệm vụ nghiên cứu
Mục tiêu nghiên cứu
Thiết kế chỉnh sửa hình ảnh cho sản phẩm món ăn của công ty TNHH Ai Cơm Việt Nam Bao gồm cắt ghép, chỉnh sửa màu sắc và sắp xếp bố cục hình ảnh món ăn hợp lý
Tạo ra những hình ảnh bắt mắt cho trang web của doanh nghiệp Kết hợp những hình ảnh món ăn thực tế đã có sẵn và bố cục, màu sắc, nội dung cần truyền tải để tạo ra banner trang web
Nhiệm vụ nghiên cứu
Tìm hiểu rõ về bố cục màu sắc, font chữ, kích thước thông qua những tài liệu trong và ngoài nước
Nghiên cứu và tìm ra những ý tưởng thiết kế để món ăn trở nên đặc sắc hấp dẫn hơn đến với người tiêu dùng
Yêu cầu thiết kế hình ảnh trở nên thu hút phù hợp với sản phẩm món ăn
4 Đối tượng và phạm vi nghiên cứu
Đối tượng nghiên cứu
Công ty TNHH Ai Cơm Việt Nam
Phạm vi nghiên cứu
Trang 13Nghiên cứu sản phẩm của công ty
Nghiên cứu xây dựng hình ảnh trang web
5 Phương pháp nghiên cứu
Phương pháp nghiên cứu đề tài “thiết kế chỉnh sửa hình ảnh và thiết kế giao diện hình ảnh website” cho công ty Ai Cơm Việt Nam là phương pháp phân tích dữ liệu và tổng hợp
6 Ý nghĩa của đề tài
“Thiết kế chỉnh sửa hình ảnh và thiết kế giao diện hình ảnh website” mang lại ý nghĩa quan trọng đối với doanh nghiệp, đây có thể nói là một phần trong quảng bá sản phẩm món ăn thông qua những hình ảnh hấp dẫn mang lại giá trị về kinh tế và thương hiệu của doanh nghiệp
7 Kết cấu của đề tài
Đề tài này được chia làm 4 chương Chương 1: Giới thiệu đơn vị thực tập Chương 2: Cơ sở lý thuyết
Chương 3: Thiết kế chỉnh sửa hình ảnh và giao diện hình ảnh trên website
Chương 4: Thiết kế in ấn
Chương 5: Kết luận và hướng phát triển
Trang 14CHƯƠNG 1 GIỚI THIỆU ĐƠN VỊ THỰC TẬP 1.1 Giới thiệu chung về công ty
Tên công ty: Công ty TNHH Ai Cơm Việt Nam
Tên tiếng anh: AI COM VIET NAM COMPANY LIMITED Mã số thuế: 0318060498
Trụ sở: 253 đường Hoàng Hoa Thám, phường 13, quận Tân Bình, TP Hồ Chí Minh
Người đại diện: Trình Quốc Lam Email: aicomvietnam.vn@gmail.com Logo công ty:
Hình 1.1 logo công ty Ai Cơm Việt Nam
1.2 Quá trình hình thành và phát triển
Công ty TNHH Ai Cơm Việt Nam tên thương hiệu là ICom Việt
Nam, công ty được thành lập vào năm 2023 đã có 14 chi nhánh quán cơm
trên thành phố Hồ Chí Minh
Trang 151.3 Sứ mệnh và tầm nhìn của công ty Ai Cơm Việt Nam
1.3.1 Sứ mệnh
Đảm bảo mang đến cho khách hàng những trải nghiệm ẩm thực tuyệt vời Vì thế, chúng tôi luôn không ngừng nâng cao chất lượng dịch vụ và sản phẩm
1.3.2 Tầm nhìn
Ai Cơm Việt Nam không chỉ giới thiệu ẩm thực Việt Nam đến với thế giới, mà còn góp phần giữ gìn và phát huy giá trị văn hóa ẩm thực truyền thống của Việt Nam
1.4 Sản phẩm của doanh nghiệp
Công ty TNHH Ai Cơm Việt Nam chuyên về ẩm thực Việt Nam gồm cơm xá xíu và cơm gà nướng
Trang 16CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2.1 Banner web
Banner website là một yếu tố cần có trong việc xây dựng trang web Để banner được sử dụng hiệu quả thì kích thước banner website chuẩn yêu cầu độ chính xác cao Điều này không chỉ mang lại giá trị về hình thức cho trang web mà còn những giá trị khác liên quan đến tối ưu hóa việc truyền tải thông tin, nội dung của doanh nghiệp thông qua mặt hình ảnh
2.1.1 Các hình thức quảng cáo banner
a Traditional:
Trong số các hình thức quảng cáo banner hiện nay thì hình thức này có lẽ là thông dụng nhất Nó có hình dạng chữ nhật, gồm chữ và ảnh để truyền tải được thông điệp ngắn gọn, xúc tích Đặc biệt, nó có kết nối với một trang hay một website khác Việc nhiều người yêu thích hình thức quảng cáo này là bởi nó dễ thiết kế, thay đổi cũng như chèn vào trang web
b In-line:
Đây là dạng quảng cáo banner được định dạng trong một cột ở phía dưới bên trái hoặc bên phải của trang web Nó cũng có nhiều điểm tương đồng với quảng cáo banner truyền thống nhưng điểm khác biệt là nó có thể hiển thị dưới dạng một đồ họa chứa đường links Thậm chí, đôi khi chỉ là một đoạn text với những đường siêu liên kết, nổi trội nhờ những phông màu hay đường viền
c Pop-up:
Hình thức quảng cáo này theo dạng một hộp thư thoại sẽ được bật lên khi có khách hàng truy cập vào trang web
Trang 172.1.2 Các định dạng banner trên web
Banner Ảnh tĩnh (JPEG, PNG, SVG) : làm bằng Photoshop, Illustrator hoặc bất cứ phần mềm nào có thể xuất ảnh Loại này phổ biến nhất vì cho file dung lượng thấp, có lợi khi muốn tối ưu tốc độ tải website
Banner ảnh động GIF : nhấp nháy hoặc hiệu ứng hoạt hình tạo ra tương tác tốt hơn ảnh tĩnh, tuy nhiên nhiều frame thì dung lượng cũng lớn
2.2 Bố cục thiết kế hình ảnh web
2.2.1 Các quy tắc thiết kế layout website là gì?
a Quy tắc số 1: Quy tắc 1/3 (một phần ba)
Đây là quy tắc được ứng dụng rộng rãi trong layout design, là một tiêu chuẩn thiết kế giúp sản phẩm/ dịch vụ của doanh nghiệp bạn tạo được ấn tượng với người dùng ngay từ lần đầu tiên truy cập vào website
Cách thực hiện: Chia bố cục website thành 3 hàng, 3 cột; ở các điểm giao nhau của hàng và cột, designer có thể đặt các yếu tố chính và các yếu tố hỗ trợ để đảm bảo bố cục trang web khoa học, dễ nhìn nhất
Hình quy tắc số 1: quy tắc 1/3
Trang 18b Quy tắc số 2: Cân bằng
Yếu tố cân bằng luôn được đề cao trong thiết kế layout (bố cục web) nhằm tạo sự hài hòa, cân đối cho toàn bộ trang website Để đạt được cân bằng cho web, bạn cần kết hợp đan xen các yếu tố lớn với các yếu tố nhỏ hơn, chú trọng các khoảng trắng để tạo không gian cho các chi tiết khác Tuy nhiên, không nên lạm dụng quá nhiều khoảng trắng
c Quy tắc số 3: Quy tắc số lẻ
Số lẻ thường được lựa chọn nhiều hơn so với số chẵn Do vậy, để bố cục web thu hút và đạt hiệu quả nhất, designer thường thiết kế nhóm nhỏ với 3 yếu tố để không tạo cảm giác là một khối thống nhất
d Quy tắc số 4: Hệ thống lưới
Sử dụng hệ thống lưới (các đường ngang, dọc giao nhau) trong thiết kế layout là quy tắc được thực hiện dễ dàng nhất nên được các designer rất ưa chuộng giúp việc trình bày, sắp xếp nội dung cũng như quản lý hình ảnh trên web dễ dàng, khoa học nhất
2.3 Màu sắc trong thiết kế hình ảnh web
2.3.1 Ý nghĩa màu sắc của món ăn
Màu sắc trong món ăn không chỉ đẹp, tạo sự khác biệt mà thực sự còn chứa đựng những ý nghĩa khác nhau và mang lại những cảm xúc khác nhau cho người thưởng thức Thế nên, sự đa dạng của màu sắc trong ẩm thực cũng trở thành nguồn cảm hứng sáng tạo của rất nhiều blogger cũng như chuyên gia ẩm thực nổi tiếng thế giới
Trang 19Hình màu sắc
- Màu đỏ:
Các nghiên cứu cho thấy đỏ là màu sắc bắt mắt, tượng trưng cho sự hấp dẫn tựa như những lời mời quyến rũ, kích thích sự thèm ăn, gợi nhớ đến sự chín mọng và vị ngọt của quả
- Màu cam:
Thực phẩm màu cam thường gắn liền với những món ăn mùa thu truyền thống ở phương Tây như bí ngô, kẹo bắp Màu cam rực rỡ còn khiến chúng ta liên tưởng tới nước cam và cà rốt - những hình ảnh luôn tràn đầy năng lượng và sức sống
- Màu vàng:
Màu vàng rực rỡ là đại diện cho cảm giác hạnh phúc - chính vì vậy màu sắc này xuất hiện rộng rãi trên các bàn tiệc ở nhiều nơi khác nhau khi nó gợi lên tinh thần lạc quan và cảm giác tích cực
- Màu xanh lá cây:
Khi tính bền vững và hữu cơ trở thành tiêu chí hàng đầu trong việc lựa chọn thực phẩm của nhiều người tiêu dùng, màu xanh lá cây cũng trở nên phổ biến hơn trong các bữa ăn Không chỉ mang sắc thái thiên nhiên, màu xanh lá cây giờ đây gần như đồng nghĩa với sức khỏe và sự an toàn
- Màu xanh lam:
Trang 20Màu xanh đích thị là "nữ hoàng" của các bàn tiệc sống ảo Song thực phẩm tự nhiên có màu xanh lại khá hiếm - hầu hết chúng ta vẫn thường biết màu xanh tự nhiên được chiết xuất từ hoa đậu biếc Màu xanh còn khiến con người cảm thấy bình tĩnh và thư thái
- Màu tím:
Màu tím gắn liền với sự quý phái, trí tuệ và bí ẩn, khơi gợi sự tò mò nơi người thưởng thức Màu sắc này rất hay được sử dụng trong các bữa tráng miệng Dù bạn đã rất no sau bữa tối nhiều thịt, một miếng bánh ngọt màu tím sẽ luôn làm bạn muốn ăn thêm
- Màu nâu:
Màu nâu và màu be là một số màu phổ biến nhất chúng ta ăn ngày nay Thịt, bánh mì, và một số loại đậu đều có màu nâu Màu nâu được liên kết với độ tin cậy vì nó là màu của Đất mẹ, mang cảm giác tự nhiên, lành mạnh, hữu cơ
- Màu đen:
Màu đen nhờ sự tối giản của nó, nhiều thương hiệu mỹ phẩm sử dụng màu đen làm màu chủ đạo để biểu thị rằng sản phẩm của họ là chất lượng và sự sang trọng
- Màu trắng:
Màu trắng sự tối giản, minh bạch Màu trắng là một màu trung tính, dễ dàng kết hợp với các màu khác cho mục đích xây dựng thương hiệu Nó chủ yếu được sử dụng như một màu nhấn hoặc màu nền
- Màu xám:
Màu xám sự chín chắn, quyền uy Nếu bạn muốn xây dựng trang web doanh nghiệp trang trọng, màu xám là một lựa chọn màu sắc tuyệt vời
Trang 212.3.2 Phối màu theo nguyên tắc bánh xe màu sắc
Một công cụ tuyệt vời để hiểu những điều cơ bản về lý thuyết màu sắc là bánh xe màu Bánh xe màu hoặc vòng tròn màu là một tổ chức minh họa trừu tượng của các màu sắc xung quanh một vòng tròn, cho thấy mối quan hệ giữa các màu cơ bản, màu bậc hai, màu bậc ba, màu bổ sung… Bánh xe màu rất hữu ích để xác định độ hài hòa của màu sắc cho tổng thể website Nó sẽ giúp bạn tập hợp một bảng màu trông tuyệt vời Trong đó, bánh xe màu thể hiện:
Trang 222.3.3 Kết hợp màu sắc theo các phong cách khác nhau
- Split-complementary (Phối màu bổ sung xen kẽ): Phối màu bổ sung xen kẽ được tạo thành từ một màu cơ bản và hai màu liền kề với phần bổ sung của màu cơ bản
- Triadic (phối màu bộ ba): sử dụng các màu cách đều nhau trên bánh xe màu (như đỏ, xanh lam và vàng)
- Rectangular – tetradic colors (phối màu chữ nhật): Phối màu ở các góc vuông của bánh xe màu tạo thành hình chữ nhật
Trang 23- Analogous (Phối màu tương đồng): Ba màu tương tự nằm cạnh nhau trên bánh xe màu Kết quả là, các màu tương tự cực kỳ giống nhau, như xanh lá cây và xanh lục vàng
- Cuối cùng, màu đơn sắc (Monochromatic): Chỉ đơn giản là các biến thể của cùng một màu Điều này được thực hiện bằng cách sử dụng các sắc thái, sắc thái và tông màu
2.3.4 Sử dụng độ tương phản
Một nguyên tắc lý thuyết màu quan trọng khác liên quan đến việc sử dụng độ tương phản Độ tương phản càng cao, hai màu càng nổi bật với nhau Ví dụ: văn bản màu trắng trên nền tối hoặc ngược lại Sự tương phản thu hút sự chú ý và có thể làm cho các yếu tố quan trọng nhất định trở nên nổi bật về mặt trực quan
Khi đánh giá độ tương phản, điều quan trọng là phải xem xét không chỉ màu sắc (tức là xanh lam và xanh lá cây), mà còn cả tông màu của chúng Hai màu khác nhau với tông màu đồng đều không tạo ra độ tương phản cao Một mẹo đơn giản để xác định mức độ tương phản của hai màu là chuyển chúng sang thang độ xám – sự khác biệt về độ tương phản sẽ rõ ràng hơn nhiều
Đơn giản là tối thượng
“Make it simple’, điều này có vẻ như nó có thể trở nên phức tạp Thay vì cứ phải chú tâm chọn bảng màu, hãy nghĩ đến sự đơn giản Chú trọng quá nhiều vào phối quá nhiều màu thực sự phức tạp, thường gây khó chịu cho mắt Đặc biệt với những người chưa có nhiều kinh nghiệm phối màu, sự đơn giản là lựa chọn an toàn nhất
2.3.5 Gắn kết màu sắc với thương hiệu
Cuối cùng, hãy xem xét thương hiệu của bạn sẽ đóng vai trò như thế
Trang 24một số màu nhất định gắn liền với nó Nếu đúng như vậy, bạn có thể sử dụng bảng màu hiện có để giúp tạo bảng màu cho trang web của mình
Tuy nhiên, bạn có thể cần phải điều chỉnh màu sắc thương hiệu của mình Nếu một trong những màu bạn đã chọn có ý nghĩa tiêu cực, bạn có thể phải chọn một màu khác, chẳng hạn chẳng ai chọn màu đen cho một thương hiệu thức ăn, cũng như không ai chọn màu xám cho dịch vụ thẩm mỹ, làm đẹp cả
Màu sắc đóng vai trò khá quan trọng trong thiết kế website Phối màu hài hòa sẽ giúp website của bạn tạo ấn tượng với khách hàng, giúp họ cảm thấy dễ chịu khi truy cập vào và giữ chân khách hàng ở lại website lâu hơn
2.4 Typographic trong thiết kế chỉnh sửa hình ảnh web
2.4.1 Khái niệm về typographic
Typography là nghệ thuật sáng tạo, sắp xếp để tạo ra kiểu chỗ mới dựa vào các yếu tố cơ bản như font chữ, kích thước, khoảng cách theo nhiều cách Việc này giúp bạn sử dụng một cách khéo léo kiểu chữ nhằm tạo ra tác động cho loạt thiết kế gồm thiết kế website, brochure, in ấn, sách… và cả đồ hoạ máy tính
Ở môi trường kinh doanh đang ngày càng cạnh tranh gay gắt như hiện tại, những thương hiệu cần phải tự tạo ra bản sắc riêng biệt cho mình Họ phải biết cách làm sao để thu hút được sự chú ý của khách hàng và truyền tải thông điệp thương hiệu với hiệu quả cao nhất Designer phải dùng Typography như một công cụ mạnh mẽ nhằm biến văn bản thành thông điệp có thể tác động trực tiếp đến người xem Việc này sẽ hỗ trợ biến nội dung của bạn mang ý nghĩa sâu sắc và thu hút hơn Ý tưởng Typography của bạn càng độc đáo thì thương hiệu của bạn càng tạo được sự kết nối giữa bạn với khách hàng hiệu quả hơn Mặt khác, designer được
Trang 25phép tạo ra hình ảnh trực quan cho thương hiệu của mình khi sử dụng Typography Tuy nhiên, có một số điều quan trọng cần được cân nhắc trước khi quyết định sử dụng nó Đó là việc chọn phông chữ, kích thước, vị trí, nội dung văn bản, khoảng trắng và nhiều khía cạnh khác nữa của việc dùng kiểu chữ nhằm tạo sự ấn tượng cho những bản thiết kế
2.4.2 Kiểu chữ và font chữ
Kiểu chữ là một tập hợp các ký tự có cùng một đặc tính thiết kế và thường bao gồm nhiều font chữ khác nhau Trong khi đó, font chữ được định nghĩa là sự thay đổi về trọng lượng và kích thước của một kiểu chữ
Ví dụ, Arial là một trong những kiểu chữ được sử dụng nhiều nhất trong văn bản và thiết kế website Để không bị nhàm chán, designer có thể kết hợp khéo léo các font chữ trong cùng kiểu Arial như Arial Italic, Arial Narrow, Arial Bold, Arial Black,…
2.4.3 Hệ thống cấp bậc (heading)
Thông thường, một bài viết sẽ gồm có tiêu đề, tiêu đề phụ và những loại nội dung khác nằm trong văn bản Những yếu tố này sẽ được phân chia cấp bậc một cách rõ ràng, với kích thước, độ đậm nhạt và sắp xếp hiệu ứng của các ký tự văn bản khác nhau Tiêu đề chính thường được thiết kế in đậm và lớn nhất, tiếp đến là tiêu đề phụ và cuối cùng là đoạn văn bản với nội dung dài hơn cùng kích thước nhỏ
2.4.4 Căn chỉnh
Biết cách căn chỉnh hợp lý sẽ giúp Typography trở nên thống nhất toàn bộ văn bản Cụ thể, mỗi ký tự văn bản sẽ có kích thước cũng như không gian bằng nhau Hơn nữa, nó sẽ đảm bảo khoảng cách phù hợp giữa các phần tử với nhau
Trang 262.4.5 Tương phản
Độ tương phản là một yếu tố khác của Typography giúp designer trong khía cạnh làm nổi bật lên ý tưởng hay thông điệp của mình Tương phản khi được điều chỉnh và sử dụng hợp lý sẽ khiến văn bản không những trở nên có ý nghĩa hơn mà đồng thời còn giúp thu hút người đọc hiệu quả hơn
2.5 Kích thước chuẩn trong website
Một website chuyên nghiệp và chuẩn xác là mục tiêu của mọi designer khi thiết kế web Để đạt được điều đó, trang web phải đáp ứng đầy đủ các tiêu chí mà Google đưa ra nhằm tối ưu nhất cho website của mình Một trong số những yêu cầu của Google là kích thước hình ảnh Theo đó, trước khi đăng ảnh lên website phải đảm bảo rằng hình ảnh của mình phải đủ chuẩn Chưa bàn đến việc hình ảnh phù hợp hay không, xấu hay đẹp, nhoè hay nét, kích thước hình phải chính xác là yếu tố đầu tiên (vì Google không đọc được hình ảnh, chỉ đọc kích thước, alt ảnh; còn chất lượng hình tốt là để tăng trải nghiệm người dùng)
Nếu bạn đã thay đổi các thông số kích thước ở cấu hình hệ thống, trước khi đăng ảnh bạn hãy chỉnh sửa kích thước ảnh về đúng chuẩn đấy Nếu bạn chưa thay đổi thì dưới đây là những thông số các kích thước ảnh chuẩn trên website:
• Kích thước hình ảnh Slider ở trang chủ: Kích thước ảnh Slider website: 1360 x 540 pixel
• Kích thước hình ảnh trong bài viết: Kích thước ảnh minh họa: 300 x 188 pixel
• Kích thước ảnh chi tiết: 800 x 500 pixel
Trang 27• Kích thước hình ảnh bên trong sản phẩm: đối với hình ảnh minh họa là 300 x 400 pixel, với hình ảnh chi tiết thì lớn gấp đôi là 600 x 800 pixel
Nhìn chung thì các kích thước ảnh chuẩn trên website kể trên có
thể thay đổi tùy ý thích nhưng không nên thay đổi quá nhiều so với thông số gốc vì nó sẽ bị lệch chuẩn, hình ảnh sẽ không đúng chuẩn của Google đưa ra
Khi bắt tay vào thiết kế website, phải lưu ý những tiêu chuẩn vàng này, vì điều này sẽ giúp Google đánh giá cao trang web, từ đó đem lại hiệu quả cho hoạt động SEO Trải nghiệm người dùng trên web tốt hay không phụ thuộc một phần vào kích thước ảnh này
2.6 Tầm quan trọng của thiết kế hình ảnh đem lại giá trị cho thương hiệu
Các banner hay hình ảnh mang tính chất quảng cáo tỏ ra cực kì hiệu
quả trong việc tiếp cận và để lại dấu ấn mạnh mẽ trong mắt khách hàng
tiềm năng Đây cũng là một trong những cách thức marketing phổ biến trong thời đại hiện nay Kèm theo đó là mức độ linh hoạt cao, khi mà có thể sử dụng banner ở nhiều các vị trí khác nhau ở trên website hoặc ngoài đời Đặt trên các trang mạng internet như trang chuyên tin tức, trang mạng xã hội, diễn đàn,… hay trên các khu vực đông người, trên đường phố,…
Trong thời đại công nghệ số thì các hình ảnh thiết kế càng được sử dụng nhiều trên các trang mạng internet và có gắn liên kết kèm theo, mục đích là phục vụ cho việc giới thiệu một sự kiện, chương trình cụ thể nào đó Người dùng nhìn thấy và họ tương tác click vào banner là sẽ được dẫn đến một địa chỉ trang web có chứa đầy đủ các nội dung, thông tin liên quan
Dù bạn dùng banner trong việc tiếp thị online hay offline thì mấu chốt của cách thức marketing này đó chính là tiếp cận và lối kéo người
Trang 28dùng bằng những hình ảnh và nội dung thu hút Đặc biệt là những banner được thiết kế tỉ mỉ, đẹp mắt và độc đáo luôn được khách hàng chú ý nhiều, kèm theo đó là những thông điệp ngắn gọn, xúc tích, ý nghĩa
Hình ảnh là một yếu tố dường như không thể thiếu trong tất cả các trang web hiện nay Thông qua hình ảnh, doanh nghiệp không chỉ làm sinh động cho website của mình Thông qua đó còn để tiếp cận khách hàng một cách hiệu quả hơn Để thiết kế hình ảnh được tối ưu hoá hơn, kích thước banner website chuẩn nên được kết hợp với mục đích đặt banner và nội dung hình ảnh
Trang 29CHƯƠNG 3 THIẾT KẾ CHỈNH SỬA HÌNH ẢNH VÀ GIAO DIỆN HÌNH ẢNH TRÊN WEBSITE
3.1 Chỉnh sửa hình ảnh
Món ăn cơm xá xíu và cơm gà nướng đây là món ăn chính của thương hiệu ICom Việt Nam thuộc công ty Ai Cơm Việt Nam Yêu cầu thiết kế của bên doanh nghiệp cần chỉnh sửa hình ảnh rõ nét và bắt mắt người xem, màu sắc của món ăn hấp dẫn với một mức độ chân thật Mục đích của việc chỉnh sửa hình ảnh món ăn này là để trên trang web của công ty và cũng thuận tiện hơn cho việc thay đổi món khi doanh nghiệp cần
3.1.1 Món cơm xá xíu và cơm gà nướng
Yêu cầu chỉnh sửa hình ảnh màu sắc, cắt ghép bố cục hợp lí cho từng món như cơm xá xíu (gà nướng) truyền thống, cơm xá xíu (gà nướng) trứng lòng đào, cơm xá xíu (gà nướng) thượng hạng, combo cơm xá xíu (gà nướng) thượng hạng kèm canh rong biển
Trang 30Hình cơm xá xíu ICom
Hình cơm gà ICom