Khám phá các loại hình và định dạng hình ảnh cho gói thiết kế Web - núm vú

Các gói phần mềm đồ hoạ không có giá rẻ, vì vậy trước khi bạn thực hiện một quyết định để sử dụng một, bạn cần phải xác định loại công việc đồ họa bạn sẽ làm cho các dự án thiết kế web của bạn. Các nhà thiết kế web thuộc ba loại tiêu chuẩn, và kiểu thiết kế của bạn có thể là một, hai hoặc cả ba:

• Nhà thiết kế đồ hoạ: Bạn có thể coi mình là họa sỹ minh hoạ bởi vì bạn tạo ra tất cả các đồ họa mà bạn sử dụng từ đầu. Bạn bắt đầu với một bảng trắng, và thông qua các công cụ và kỹ thuật khác nhau được sử dụng trong phần mềm chỉnh sửa hình ảnh ưa thích của bạn, bạn tạo ra đồ họa độc đáo của riêng mình.

• Trình điều khiển đồ hoạ: Bạn là một bậc thầy về chụp ảnh, hoặc ảnh, rằng ai đó đã tạo ra và vận dụng chúng để sử dụng trong các dự án thiết kế web của bạn. Thông qua việc sử dụng các công cụ và kỹ thuật khác nhau, bạn có thể thực hiện những việc như điều chỉnh màu sắc và kích cỡ, thậm chí thay đổi hình dạng và vị trí của các phần tử đồ họa khác nhau (đặc biệt nếu bạn đang làm việc với đồ hoạ vector, được đề cập trong phần tiếp theo).

• Bạn tải hình ảnh từ tài nguyên trên web và sử dụng những hình ảnh này để thêm các yếu tố thiết kế màu sắc và hình ảnh trực quan vào dự án trang web của bạn. Bạn có thể phù hợp với một, hai hoặc cả ba trong số những loại này và điều đó hoàn toàn có thể chấp nhận khi thiết kế các chủ đề cho các trang web miễn là bạn tuân theo bản quyền và các hạn chế về bản quyền đối với đồ họa bạn sử dụng (nếu bạn là một người thao tác đồ họa và / hay người tiêu dùng). Ngoài ra, điều quan trọng là phải hiểu các loại đồ họa mà bạn có thể sử dụng để hoàn thành mục tiêu của bạn cho các dự án thiết kế web của bạn. Các phần sau đây bao gồm các loại đồ họa và định dạng tệp tin khác nhau để giúp bạn hiểu được loại đồ họa bạn cần sử dụng cho các mục đích khác nhau.

So sánh hình ảnh raster và vector

Là một nhà thiết kế đồ họa, rất có thể bạn sẽ làm việc với hai loại đồ họa - raster và vector. Là một nhà thiết kế web, chắc chắn bạn sẽ làm việc với các ảnh raster, và bạn có thể làm việc với các hình ảnh vector. Chương trình phần mềm bạn sử dụng để chỉnh sửa và tạo đồ họa phụ thuộc vào loại tệp hình ảnh mà bạn đang làm việc. Dưới đây là tóm tắt ngắn gọn về sự khác biệt giữa hình ảnh raster và vector:

Raster:

• Những hình ảnh này được tạo thành từ hàng trăm chấm nhỏ, hoặc pixel. Mỗi pixel có thể là một màu khác nhau, cho phép hình ảnh, hình ảnh đầy màu sắc và phong phú. Tạo và chỉnh sửa một hình ảnh raster cuộc gọi cho một chương trình chỉnh sửa raster dựa, chẳng hạn như của Corel PaintShop Pro hoặc Photoshop. Vector:

• Những hình ảnh này được tạo thành từ đường cong chứ không phải là các điểm ảnh. Hình ảnh vector có bốn điểm vectơ, một ở mỗi góc của hình ảnh, và bạn kết nối các dấu chấm với các đường cong. Sau đó các đường cong có thể được lấp đầy với màu sắc và hiệu ứng. Hình ảnh Raster

Hình ảnh Raster, chẳng hạn như ảnh và đồ hoạ được sử dụng trong thiết kế chủ đề trang web, thường được sử dụng cho thiết kế và hiển thị trên trang web. Hình ảnh Raster không có quy mô tốt; nếu bạn cố gắng thay đổi kích thước hình ảnh lớn hơn hoặc nhỏ hơn, bạn sẽ thấy một sự mất mát đáng kể về chất lượng hình ảnh bởi vì các pixel được thay đổi kích thước và hình ảnh trở nên nhạt màu. Hình ảnh Raster là

phẳng - chỉ có một lớp đối với các phần tử hình ảnh - làm cho khó khăn (và đôi khi không thể) để chỉnh sửa một số phần tử hình ảnh khác nhau bên trong tệp đồ hoạ. Tuy nhiên, để sử dụng trên web, hình ảnh raster tải nhanh vì chúng thường có kích thước tệp nhỏ và không yêu cầu nhiều băng thông để chuyển. Hình ảnh Vector

Hình ảnh Vector được sử dụng cho thiết kế in, chẳng hạn như danh thiếp, tờ rơi, quảng cáo tạp chí và bảng quảng cáo. Bởi vì hình ảnh vector được tạo thành các đường cong chứ không phải là các pixel tĩnh, hình ảnh vector có thể được thay đổi kích thước mà không mất chất lượng. Vì vậy, bạn có thể giảm một hình ảnh vector với kích thước của một tem bưu chính hoặc tăng kích thước của nó để phù hợp với mặt của một chiếc xe tải lớn, và chất lượng hình ảnh vẫn giữ nguyên. Đó là lý do tại sao hình ảnh vector là lý tưởng cho các biểu tượng và công việc in. Thông thường, các hình ảnh vector là

layered - mỗi phần của hình ảnh có một lớp riêng - cho phép bạn sử dụng trình biên tập hình ảnh vector ưa thích của bạn, chẳng hạn như Illustrator, để thao tác và thay đổi các phần tử khác nhau trong tệp hình ảnh vector. Kích thước tệp của hình ảnh vector có thể khá lớn nên chúng không lý tưởng để hiển thị trên trang web; bạn sẽ muốn sử dụng hình ảnh raster thay thế. Tuy nhiên, bạn có thể bắt đầu làm việc với một tệp vector cho công việc thiết kế web của bạn và sau đó lưu tệp cuối cùng ở định dạng raster được tối ưu hóa cho web.

Tìm các định dạng tệp hình ảnh

Điều quan trọng là phải hiểu được loại định dạng tệp hình ảnh mà bạn sẽ làm việc với thiết kế trên web. Hình ảnh - cho dù ảnh hoặc biểu tượng - bạn lưu và sử dụng trên trang web của bạn phải là loại tệp raster do kích thước tệp nhỏ hơn và hiển thị màu sắc phong phú. Trong các phần sau, bạn sẽ tìm hiểu cách nén ảnh hưởng đến kích thước của hình ảnh raster và khám phá những loại định dạng tệp nào bạn có thể sử dụng trong dự án của riêng bạn.

Hiểu về nén

Khi bạn sử dụng hình ảnh raster trong thiết kế web của mình, chúng cần có một lượng

nén, hoặc giảm kích thước tổng thể của tệp. Sự nén hình ảnh xảy ra khi bạn lưu tệp hình ảnh raster dưới dạng JPG, GIF hoặc PNG. Nén tệp giảm kích thước tệp hình ảnh để hình ảnh tải nhanh trên trang web. Kích thước tệp hình ảnh càng lớn thì ảnh của bạn sẽ tải lên trên trang web của bạn càng lâu.

Nén tập tin ảnh có thể sử dụng hai thuật toán khác nhau, tùy thuộc vào định dạng tệp bạn đã chọn cho tệp hình ảnh của mình.Đối với các tệp hình ảnh kỹ thuật số, nén xảy ra bằng một trong hai cách:

Lossless compression:

• Tất cả dữ liệu từ tệp hình ảnh được giữ lại trong và sau khi nén, thường dẫn đến việc không mất chất lượng từ tệp hình ảnh ban đầu. Lossy nén:

• Điều này làm giảm kích thước của một tập tin hình ảnh bằng cách loại bỏ một số bit dữ liệu nhất định từ tập tin gốc hoặc bằng cách kết hợp các phần của hình ảnh tương tự nhau. Điều này thường dẫn đến mất chất lượng hình ảnh từ tập tin ban đầu. Xác định loại tệp nào cần sử dụng cho các dự án của bạn

Bảng dưới đây liệt kê sáu định dạng tệp phổ biến mà bạn sẽ làm việc với thiết kế web và loại tệp và nén. Mặc dù các tệp hình ảnh cuối cùng mà bạn lưu và sử dụng trong công việc thiết kế web của bạn phải là raster, bạn có thể bắt đầu với các hình ảnh vector để chỉnh sửa và thao tác đồ họa cho phù hợp với nhu cầu của các dự án thiết kế web của bạn.

Hình ảnh Định dạng Tệp

Loại tệp hình ảnh	Loại nén	JPG
Raster	Lossy	GIF
Raster	Lossless	PNG
Raster < Vector	N / A *	EPS
Vector	N / A *	CDR
Vector	N / A *	Không phát hiện
AI	> *	Hình ảnh vector không gặp phải sự nén.

Dưới đây là ba định dạng ảnh vector chính mà có thể bạn sẽ thấy trong tác phẩm của bạn với thiết kế đồ hoạ: AI:

Adobe Illustrator, một tệp độc quyền được phát triển bởi Adobe để biểu thị hình ảnh vector

• EPS: Định dạng hình ảnh vector PostScript đóng gói

• CDR: CorelDRAW, một tệp đồ họa độc quyền do Corel phát triển để đại diện cho các hình ảnh vector

• Khi quyết định định dạng tệp hình ảnh raster nào được sử dụng trong dự án của bạn, hãy xem xét các đặc tính mỗi định dạng. Ngoài các loại nén khác nhau, các định dạng tệp tin còn chứa nhiều màu khác nhau. Các đặc tính của ba định dạng tệp hình ảnh raster phổ biến nhất bao gồm: JPG:

Định dạng này phù hợp với hình ảnh và hình ảnh nhỏ hơn được sử dụng trong các dự án thiết kế web của bạn. Mặc dù định dạng JPG nén với nén lossy, bạn có thể điều chỉnh lượng nén xảy ra khi bạn lưu tệp. Bạn có thể chọn mức nén từ 1 đến 100; bạn thường không nhìn thấy nhiều tổn thất về chất lượng hình ảnh với mức nén từ 1 đến 20.

• PNG: Định dạng này phù hợp với đồ họa lớn hơn được sử dụng trong thiết kế web, chẳng hạn như biểu trưng hoặc đồ thị tiêu đề chính xác định thương hiệu và toàn bộ hình ảnh của trang web. PNG sử dụng nén hình ảnh không mất chất lượng và do đó, không bị mất dữ liệu trong quá trình nén, tạo ra một hình ảnh sạch hơn, sắc nét hơn. Các tệp PNG cũng có thể được tạo và lưu trên một khung làm việc trong suốt, trong khi tệp JPG không thể. Tệp JPG phải có ít nhất là

• canvas màu trắng hoặc một số màu khác mà bạn đã chỉ định. GIF: Nén tệp GIF là

• lossless , làm cho hình ảnh chính xác như bạn đã thiết kế nó mà không mất chất lượng. Tuy nhiên, tệp GIF được giới hạn ở 256 màu. Đối với hình ảnh có màu cao hơn, GIF không phải là định dạng lớn nhất để sử dụng; sử dụng định dạng PNG.