Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Hướng dẫn thiết kế trang web cho trẻ em: Hình ảnh

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS Layout
Web Design for Kids: Design Basics

Vietnamese (Tiếng Việt) translation by Hai Nhu Duong (you can also view the original English article)

Chào mừng các bạn đến với bài học thứ bảy trong loạt bài Hướng dẫn thiết kế trang web dành cho trẻ em. Chủ đề lần này chính là mọi thứ bạn cần biết về Hình ảnh.

Thực ra trang web Tuts+ Town đã được chèn vài hình minh họa, nhưng chúng tôi lại chưa hề đưa ra bất kỳ hướng dẫn chi tiết nào về hình ảnh. Vì vậy bài học lần này sẽ hướng dẫn cụ thể về các loại định dạng ảnh thường gặp trên các trang web và một số thủ thuật chỉnh sửa hình. 

Đừng quên để lại câu hỏi ở khung bình luận cuối trang nếu như bạn có bất kỳ thắc mắc nào! 

Hình ảnh trên các trang web 

Việc thêm các bức ảnh vào trang web cũng chẳng phải là quá lạ lẫm. Trang Tuts+ Town sử dụng 4 hình ảnh. Chúng tôi đã chèn những tệp ảnh đó vào trong cấu trúc HTML, rồi sau đó điều chỉnh kích cỡ và vị trí của chúng bằng CSS.

Có rất nhiều thứ cần phải cân nhắc khi đưa hình ảnh lên trang web, ví dụ như định dạng ảnh nào tốt nhất, làm sao để có được những ảnh thích hợp và làm thế nào để sử dụng chúng.

Trong suốt bài hướng dẫn này chúng ta sẽ cùng sử dụng các hiệu ứng cho bức ảnh dưới đây, bản đồ thị trấn Tuts+:

Bản đồ thị trấn Tuts+

Các định dạng ảnh

Những định dạng ảnh được sử dụng cho các trang web nhiều nhất chính là JPEG, PNG và SVG.  Bây giờ hãy cùng nói về ý nghĩa của chúng.

Ảnh JPEG

Một bức ảnh thuộc định dạng JPEG khi tên tệp của chúng có đuôi là: “.jpeg” hoặc “.jpg”.  Loại ảnh này chiếm đa số các ảnh mà bạn sẽ gặp và sử dụng cho các trang web.

Loại ảnh này vô cùng tuyệt vời khi được dùng cho việc tạo ra những tệp ảnh có kích cỡ nhỏ hơn để dễ dàng đưa vào trang web hoặc gửi chúng qua email. Nhưng với kích cỡ như vậy thì ảnh cũng sẽ có chất lượng kém hơn.

Ảnh PNG

PNG là loại định dạng ảnh đi kèm với đuôi “.png”.  Khác với JPEG, định dạng PNG không hề làm cho chất lượng hình ảnh giảm đi.  Những bức hình vẫn giữ được độ rõ ràng và sắc nét như cũ, nhưng bù lại thì kích cỡ tệp ảnh có thể sẽ lớn hơn JPEG rất nhiều.

Định dạng PNG là lựa chọn tốt cho việc vẽ đường nét, văn tự hay các ảnh đồ họa có kích cỡ nhỏ. Ta cũng có thể dùng nó để tạo hình nền trong suốt, trong khi JPEG không làm được. 

Ảnh SVG

Ảnh đồ họa vector có khả năng mở rộng hay SVG (Scalable Vector Graphics) là những hình ảnh có thể phóng to nhỏ tùy ý mà không làm cho ảnh bị bể hoặc mờ đi như JPEG hay PNG. Những tệp ảnh này thường được lưu với đuôi “.svg”. Định dạng này rất hoàn hảo cho các ảnh minh họa hay hình logo của công ty.

Tất cả các hình ảnh được sử dụng trên Tuts+ Town đều mang định dạng SVG! Thậm chí nếu chúng ta vào CSS trên trang web và chỉnh chiều rộng (width) của bất kỳ ảnh nào ra đến 1000px thì bức hình sẽ trở nên khổng lồ mà vẫn giữ được độ sắc nét.  

Hình bên phải có định dạng SVG – rõ nét hơn nhiều đúng không nào!

Lấy hình từ đâu?

Có rất nhiều nơi hữu ích mà ta có thể lấy hình miễn phí và thoải mái sử dụng chúng  cho trang web.  

Mặc dù một số hình ảnh không hề tính tiền nhưng chúng ta vẫn buộc phải tuân theo những quy tắc nhất định như  kèm theo tên người chụp mỗi lần ta sử dụng ảnh. Nhiều hình ảnh khác thì ta chỉ được quyền đưa vào những dự án cá nhân mà không được sử dụng cho mục đích thương mại. 

Phải luôn xem xét vấn đề giấy phép (hoặc bản quyền) khi bạn chưa chắc chắn, nhưng bây giờ thì hãy nói về những nơi mà ta được tự do sử dụng miễn phí hình ảnh. 

  • Cupcake là một trang web chứa rất nhiều ảnh chụp chất lượng. Khi tìm thấy một hình ảnh vừa ý, bạn có thể bấm vào dòng Download High Res (Tải với độ phân giải cao), đặt tên cho ảnh rồi lưu về máy tính.
  • FancyCrave là một trang web khác mà ta hoàn toàn được lấy ảnh miễn phí và đặc biệt hơn là trong trang này có rất nhiều hình ảnh cho bạn lựa chọn.  Ta có thể tải những ảnh này bằng cách nhấp chuột vào dòng Download (Tải xuống) rồi lưu nó về tập tin chứa dự án. 
  • Còn với ảnh SVG thì đã có trang IcoMoon với rất nhiều ảnh đồ họa miễn phí để chọn lựa.  Đầu tiên ta phải dạ quang các hình mà ta thích bằng cách nhấn vào chúng, sau đó hãy chọn mục  Generate SVG… (Chuyển sang định dạng SVG…) ở góc dưới bên trái và cuối cùng nhấn vào chữ Download (Tải xuống).

Chỉnh sửa hình ảnh bằng cách nào?

Rất nhiều nhà thiết kế trang web sử dụng các phần mềm chỉnh sửa ảnh, ví dụ như Photoshop, để thay đổi các bức hình theo ý muốn trước khi đưa chúng vào trang web.  Ta có thể làm bất cứ thứ gì từ chỉnh màu, loại bỏ các bóng ảnh, cho tới cắt hình.

Đa số hệ điều hành trên máy tính đã cài sẵn chương trình chỉnh ảnh với một vài tính năng cơ bản.  “Preview” là lựa chọn tuyệt vời nếu bạn đang xài máy tính Mac, chương trình này cho phép ta điều chỉnh kích cỡ, cắt hình và lưu ảnh dưới các định dạng khác.  Để truy cập vào chương trình này bạn có thể tìm nó trên máy tính (bằng cách nhấn vào hình chiếc kính lúp ở trên cùng góc phải màn hình) hoặc chỉ cần nhấp mở một hình ảnh bất kỳ, vì rất có thể nó đã là trình mở ảnh mặc định của máy rồi.  

Đối với các máy vi tính xài hệ điều hành Windows, thì “Windows Photo Viewer” hoặc “Paint” sẽ là trình mở ảnh mặc định mà ta có thể dùng, giống như “Preview”, giúp tạo ra một vài chỉnh sửa cơ bản cho hình. 

Cắt ảnh

Cắt ảnh có nghĩa là bỏ đi phần bên ngoài của một bức hình. 

Tính năng này rất tiện khi mà chúng ta chỉ cần tới một phần của tấm ảnh lớn; thậm chí ta còn có thể cắt theo nhiều hình dáng khác, như hình tròn chẳng hạn! 

Chỉnh sửa bằng CSS

Không chỉ giúp ta điều chỉnh kích cỡ của hình, bằng CSS ta còn có thể sử dụng rất nhiều thuộc tính lọc ảnh, như tạo hình trắng đen, trong suốt, hay chỉnh độ sáng.  

Thang độ xám

Ta có thể chuyển hình ảnh sang đen trắng bằng cách dùng tính năng lọc (filter).

Tính năng này ta phải viết tỉ lệ độ xám (greyscale) rồi đặt giá trị phần trăm trong dấu ngoặc.

Dưới đây là vài dòng trong CSS đã được sửa để tạo hình trắng đen hoàn toàn: 

Hiệu ứng tàng hình

Tàng hình ở đây có nghĩa là ảnh trở nên gần như trong suốt, có thể nhìn xuyên qua đuợc. Hiệu ứng này có các giá trị từ .0 cho tới 1, khi ở số chỉ .0 ảnh sẽ trở nên hầu như xuyên thấu (đến mức tàng hình) và số chỉ 1 làm ảnh hoàn toàn không còn trong suốt nữa.  Các giá trị trong khoảng đó tạo nên những độ xuyên thấu khác nhau. 

Ví dụ, nếu ta chỉnh độ mờ là: .5 (opacity: .5) cho tấm hình các vòng tròn trong CSS thì sẽ được ảnh như sau:  

Kiểu hiệu ứng này sẽ rất phù hợp khi ta muốn khiến một hình ảnh trở nên mờ nhạt hơn, từ đó có thể làm nổi bật phần văn bản nằm trên.  

Làm mờ

Ta còn có thể làm mờ ảnh dựa vào các bộ lọc trong CSS. Ở phần các thuộc tính bộ lọc đó ta phải viết độ làm mờ (blur) kèm theo chỉ số điểm ảnh đặt trong ngoặc.  

Giá trị điểm ảnh càng cao thì hình sẽ càng mờ. 

Lưu ý: Bạn có thể vào trang này để tìm thấy danh sách đầy đủ các bộ lọc trong CSS. Chỉ cần nhấp chuột vào một tab CSS của một bản thử trước bất kỳ để xem nó có tính năng gì.

Tổng kết

Trong bài hướng dẫn lần này chúng ta đã cùng khám phá một vài định dạng ảnh thường thấy trên các trang web cũng như một số hiệu ứng để chỉnh sửa hình ảnh.  Để có được những bức ảnh chất lượng sẵn sàng đưa lên trang web có thể rất tốn công, từ việc chỉ cần cải thiện chúng với các công cụ đơn giản cho tới việc tạo ra những thay đổi phức tạp bằng những chương trình chỉnh sửa mạnh hơn. 

Lần tới chúng ta sẽ cùng tìm hiểu về thiết kế cơ bản để học cách tận dụng những gì ta đã trình bày trên trang web. 

Hẹn gặp lại bạn nơi đây!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.