LNT's Blog

4 bước thiết kế website hoàn hảo

<h3>
Khi bắt tay vào thiết kế web, bạn đi từ công đoạn A sang B như thế 
nào? Jason Cianfrone sẽ khái quát các bước tiếp cận tìm ý tưởng của 
riêng anh khi tiến hành thiết kế website. Chúng ta hãy cùng tìm hiểu là 
các đó là gì nhé.</h3>
Khi bạn dành được công việc đó, bạn sẽ đi gặp khách hàng và ghi chép 
lại nhiều nhất có thể những yêu cầu của họ. Và tiếp theo sẽ làm gì? Mặc 
dù các designer web có các bước thiết kế website riêng của mỗi người, 
nhưng tôi nghĩ mình nên chia sẻ phương pháp tiếp cận riêng của tôi với 
các bạn. Các bước này không phải là một danh sách liệt kê những gì bạn 
phải làm khi thiết kế, mà đơn giản chỉ là những phương pháp mà tôi 
thích. Nó giúp tôi rèn luyện về cảm hứng và đánh giá công việc.<br />

<h2>
Bước 1. Đánh giá, học hỏi, hiểu</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiby5FtOxLrmUZdVZM5nWHlRKDe_WdXfvgsCoJhzs3WkOEalX29mlNgzOUCe1T4mk0Vg4nytgbDLpCR79oMaKHSfBh4TkwRU-BWMeRxdOjpIRYBU8dLi7QuBviHrD0_YOsP7EXZ6aJklzo/s1600/workflow1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiby5FtOxLrmUZdVZM5nWHlRKDe_WdXfvgsCoJhzs3WkOEalX29mlNgzOUCe1T4mk0Vg4nytgbDLpCR79oMaKHSfBh4TkwRU-BWMeRxdOjpIRYBU8dLi7QuBviHrD0_YOsP7EXZ6aJklzo/s1600/workflow1.jpg" /></a></div>
<br />
Hãy xem xét các mục tiêu của thiết kế và nghĩ xem làm thế nào để bản thiết kế đạt được những mục tiêu đó.<br />
<br />

Trước khi bạn vội vàng ngồi ngay lên máy để thiết kế, sử dụng các 
phần mềm xây dựng code ưa thích của mình, bạn hãy để đầu óc của mình suy
 nghĩ theo đúng hướng. “Đúng hướng” theo tôi đó là suy nghĩ ngắn gọn và 
xem thông điệp của bản thiết kế là gì để hoàn thành các mục tiêu của 
bạn.<br />
Với những ghi chép trong tay, tôi sẽ nhớ hình dung lại khi gặp khách 
hàng, tìm kiếm những ý chính và mục tiêu của thiết kế, và nghĩ xem làm 
thế nào để bản thiết kế đạt được những mục tiêu đó. Cá nhân tôi đã nhận 
thấy rằng công đoạn này đạt hiệu quả nhất là khi tránh xa màn hình vi 
tính.<br />

<h3>
Đưa ra tất cả các giải pháp có thể</h3>
Tôi đọc qua những ghi chép của mình và đánh giá những khó khăn, vạch 
ra những giải pháp có thể cho các mục tiêu đã đề ra. Ví dụ, nếu khách 
hàng yêu cầu website với cảm giác “bình yên” hoặc “thư giản”, vậy là cần
 phải tiến hành với màu sắc, thể loại, hình ảnh, bố cục và khoảng trắng.
 Nếu đối tượng mục tiêu chủ yếu của khách hàng không am hiểu về công 
nghệ hoặc máy tính, vậy thì chính kinh nghiệm của người dùng, chức năng 
và những lời kêu gọi hành động lại là những yếu tố tác động đến bản 
thiết kế. Tôi luôn cố gắng dành nhiều thời gian cần thiết cho công đoạn 
này và đánh giá càng nhiều càng tốt. Khi tôi cảm thấy hài lòng, tôi sẽ 
chuyển sang công đoạn tiếp theo.<br />

<h2>
Bước 2. Thiết kế Wireframe</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69BfFagnkEQ4qmPpProVjmmcnGJWfoP8O4D2UVJddPv9N8lld6QDAaszGUZtMvbhcgFpU7ctwOl3guDSSQc7hNfNwEfjJXha3hb8I3PqEc4kiRa6CkgOyUURgwQJtQKeonn0xYLFImGo/s1600/workflow2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69BfFagnkEQ4qmPpProVjmmcnGJWfoP8O4D2UVJddPv9N8lld6QDAaszGUZtMvbhcgFpU7ctwOl3guDSSQc7hNfNwEfjJXha3hb8I3PqEc4kiRa6CkgOyUURgwQJtQKeonn0xYLFImGo/s1600/workflow2.jpg" /></a></div>
<br />
Thiết kế Wireframe có thể được tiến hành trên máy hoặc vẽ bằng tay trên giấy.<br />

<h3>
Công đoạn tiếp theo chính là thiết kế Wireframe</h3>
Tôi thích vẽ bằng tay trên giấy bởi tôi có thể ghi chép lại những lưu
 ý về wireframe để sau có thể xem lại. Mặc dù vậy, đôi khi bạn sẽ cần 
bàn bạc với khách hàng về các wireframe trước khi tiến hành thiết kế, 
khi đó wireframe nên làm trên máy tính.<br />
<br />

<strong>Các công cụ thiết kế wireframe</strong><br />
Tôi thường dùng Adobe Illustrator hoặc bất cứ chương trình chỉnh sửa đồ 
họa nào.  Ngoài ra còn có một số công cụ khác như Balsamiq Mockups hoặc 
Mock Flow app.<br />
Điều quan trọng bạn cần lưu ý đó là các wireframe không chỉ được vẽ cho 
các phiên bản trình duyệt của website. Hãy nghĩ đến liên kết chéo thiết 
bị trong toàn quá trình và hãy xem các yếu tố trên trang sẽ hoạt động 
như thế nào qua tất cả các thiết bị.<br />

<h2>
Bước 3. Tìm cảm hứng</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3X07ROB04PkJWmNxOvfpryB5BvGjundsLmqWwgL3ziSxEh_HVL6JNVlNWgIFJQeTglW93yHbLhDyyWfKe77fDAbylw14lRtbhQSffyf5eGAmrHBtNC82D1GJjEaS5tHS_x1yQggOiDQ/s1600/workflow3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3X07ROB04PkJWmNxOvfpryB5BvGjundsLmqWwgL3ziSxEh_HVL6JNVlNWgIFJQeTglW93yHbLhDyyWfKe77fDAbylw14lRtbhQSffyf5eGAmrHBtNC82D1GJjEaS5tHS_x1yQggOiDQ/s1600/workflow3.jpg" /></a></div>
<br />
Tìm kiếm cảm hứng ngoài màn hình vi tính.<br />

Những ý kiến đánh giá sẽ giúp tôi hiểu rõ hơn về bản thiết kế để tiếp
 cận với các wireframe. Nhưng trước khi bắt tay vào thiết kế, tôi thích 
tìm cảm hứng từ rất nhiều nguồn.<br />
Tôi sẽ bắt đầu với việc quan sát các website khác cũng có các mục tiêu 
tương tự như những gì tôi đã vạch ra. Nếu những gì các bạn thích, tôi 
không chỉ copy lại mà còn nghĩ cách làm sao để nó có thể được thiết kế 
tuyệt hơn. Tôi cũng hỏi xem khán giả nguồn của website sẽ phản ứng như 
thế nào với thiết kế đó?<br />

<h3>
Thiết kế phù hợp</h3>
Các designer thường có cảm hứng với việc tạo ra các tính năng hoặc 
yếu tố riêng trong bản thiết kế của mình, đơn giản chỉ vì họ thích 
chúng. Tuy nhiên, bạn đừng nên suy nghĩ về các xu hướng thiết kế hay cố 
tạo ra cái gì đó mà những designer khác sẽ thích. Mà nó phải có liên 
quan đến dự án của bạn.<br />

Ý kiến của khách hàng cũng có thể tạo nên các cảm hứng. Ví dụ, nếu 
tôi đang thiết kế website cho một cửa hàng trang sức, thay vì cứ lên 
Google và gõ tìm “các website trang sức thiết kế đẹp nhất”, tôi sẽ tìm 
đến một cửa hàng trang sức nào đó, quan sát thiết kế nội thất cửa hàng 
và suy nghĩ về cảm giác của mình khi đi vào hoặc cách bày bán sản phẩm 
của cửa hàng.<br />

<h3>
Mang theo máy ảnh</h3>
Nguồn cảm hứng thường đến từ những nơi không được chờ đợi nhất. Tôi 
thường tìm thấy cảm hứng khi rời khỏi màn hình máy tính của mình. Thiết 
kế trong một thế giới thực thường đóng một vai trò vô cùng to lớn; kiến 
trúc, nghệ thuật, thiết kế sản phẩm, nhiếp ảnh. Ngoài ra, những hình 
khối, hình dạng, và màu sắc của thiên nhiên luôn cho ta những cảm hứng 
tuyệt vời. Và chiếc máy ảnh luôn giúp tôi ghi lại nguồn cảm hứng này.<br />

<h2>
Bước 4. Thiết kế và xây dựng</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4M-hOet4LMehl5kWafv4z4FAKHD4Hj0U-LR2lxSPlVSekBn4Vyn-J4sDPxNes2fIgvUO06pLZus4fzVWCPmmey85wl1DVtkQ6dfxI32GrcSWs76eCfr3JjQmUk2YZEKOazcwmIDoWRU/s1600/workflow4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4M-hOet4LMehl5kWafv4z4FAKHD4Hj0U-LR2lxSPlVSekBn4Vyn-J4sDPxNes2fIgvUO06pLZus4fzVWCPmmey85wl1DVtkQ6dfxI32GrcSWs76eCfr3JjQmUk2YZEKOazcwmIDoWRU/s1600/workflow4.jpg" /></a></div>
<br />
Nghỉ ngơi là một điều vô cùng cần thiết<br />
Đến lúc này, tôi đã cảm thấy như mình đã biết rõ những gì cho bản thiết 
kế. Tôi đang tràn ngập cảm hứng và không thể chờ đợi thêm nữa. Tôi thích
 thiết kế trong âm nhạc; âm nhạc giúp tôi không bị mất tập trung bởi 
những tác động bên ngoài và thật chú tâm trong thế giới riêng của mình. 
Tôi để tất cả các ghi chép và wireframe bên cạnh và liên tục xem lại 
chúng.<br />

<h3>
Giải lao</h3>
Ngoài ra, tôi thường giải lao trong khi thiết kế và thấy rất hữu ích.
 Cứ chăm chăm vào cái gì đó liên tục trong suốt 8 tiếng đồng hồ sẽ chỉ 
khiến chúng ta suy nghĩ cứng nhắc theo một hướng mà thôi. Hãy thư giãn 
và nghĩ về thiết kế khi không ngồi trước màn hình vi tính, điều đó sẽ có
 thể giúp bạn có những sáng tạo mới. Quan trọng nhất, tôi không bao giờ 
quên việc mình đang thiết kế cho ai; Nghề của tôi chính là thể hiện theo
 cách sáng tạo những điều họ cần.<br />

<div _mce_style="text-align: right;" style="text-align: right;">
<strong>Dịch theo creativebloq | BBT RGB.vn</strong></div>

4 bước thiết kế website hoàn hảo

Khi bắt tay vào thiết kế web, bạn đi từ công đoạn A sang B như thế nào? Jason Cianfrone sẽ khái quát các bước tiếp cận tìm ý tưởng của ri...

Đọc thêm »

Hướng dẫn thủ thuật nén hình ảnh

Bạn không biết làm thế  nào để chuyển các hình ảnh PNGs sang JPEGs? 
Sau đây, chúng tôi sẽ hướng dẫn thủ thuật nén hình ảnh giúp bạn hiểu rõ 
về các khái niệm, thuật ngữ cơ bản và một số công cụ có ích giúp cuộc 
sống của bạn trở nên dễ dàng hơn.<br />
<br />

Dù bạn là designer làm việc cho nhà in, web hay truyền hình thì nén 
hình ảnh là một công cụ cần thiết và được sử dụng hàng ngày. Nếu không 
có nó, chúng ta sẽ phải gửi các file tới hàng trăm megabyte, mất hàng 
giờ liền, còn trang landing page của bạn cũng chẳng bao giờ xuất hiện và
 trình duyệt web thì giống như rùa bò.<br />
<br />

<strong>Quảng cáo</strong><br />

Tất cả các công cụ  thiết kế hiện đại đều có các thuật toán nén hình 
ảnh tích hợp phức tạp gây khó khăn cho việc quyết đinh của các designer.
 Tuy nhiên, để hiểu rõ làm thế nào và tại sao các file hình ảnh được nén
 lại có thể giúp các thiết kế của bạn được chính xác và sao chép đúng 
như bạn dự định.  Sau đây, chúng tôi sẽ giúp bạn hiểu rõ về các thuật 
ngữ và khái niệm nén ảnh cơ bản mà mọi designer cần phải biết, và giới 
thiệu về một số công cụ hữu ích trên thị trường nhằm giúp bạn giải quyết
 vấn đề.<br />

<h2>
01. Bitmaps</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrLMsOyKt9SkfZ98t5P48zkJJkoGb88LSqaZeL-2CzuR8mdIVyH4nQe8H7Ir5RJeKvU7ET-y9MmztoHJxCo0xIFkiEqbwAPa5El_Bzvf8zzKWYvHVtSOLAMkzeHD6nxXjl_0XpXJ7Bgk/s1600/compresscat(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrLMsOyKt9SkfZ98t5P48zkJJkoGb88LSqaZeL-2CzuR8mdIVyH4nQe8H7Ir5RJeKvU7ET-y9MmztoHJxCo0xIFkiEqbwAPa5El_Bzvf8zzKWYvHVtSOLAMkzeHD6nxXjl_0XpXJ7Bgk/s1600/compresscat(1).jpg" /></a></div>
Có hai loại hình ảnh cơ  bản: bipmap và vector<br />
<br />

Một khi bạn làm việc với các hình ảnh, bạn sẽ hiểu có hai loại hình ảnh cơ bản là bitmap và vector.<br />

Hình ảnh bipmap giống như một loại tranh khảm với các điểm ảnh màu 
sắc, khi nhìn từ xa, nó là một hình ảnh mượt mà đơn lẻ - và bạn không 
cần phải phóng to để thấy rõ từng điểm ảnh.<br />

<h2>
02. Vectors</h2>
Mặt khác, Vector, là một bộ thuật toán của các kết hợp mô tả chuỗi 
các đường thẳng, hình dạng và hình khối. Hình ảnh Vector có thể được mô 
phỏng ở mọi kích thước mà vẫn giữ nguyên chất lượng bằng cách áp dụng 
các kết hợp đó ở một quy mô khác nhau. Do đó, hình ảnh vetor có kích 
thước rất nhỏ nhưng lại không phù hợp cho hình ảnh chân thực vì về cơ 
bản, ảnh thường thay đổi bố cục và sắc thái qua một khu vực hẹp. Hình 
ảnh Bipmap cần được nén lại, còn Vector (về cơ bản) thì không cần.<br />

<h2>
03. Nén ảnh lossy (mất dữ liệu)</h2>
<h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHM7k7U6Tc6TSqqadkU5rDk5wzCGoXK5oWhyTQtnBlZLmedypyZE4K3bgReHgdfYtMo2VVf_4uyDJQwZ_Wpg8vG0Qa0yXRvmZLDYz3BZWbzqE7g6k5UeZ4IFGxlzkyXDIxRRywZob_dg/s1600/loss.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHM7k7U6Tc6TSqqadkU5rDk5wzCGoXK5oWhyTQtnBlZLmedypyZE4K3bgReHgdfYtMo2VVf_4uyDJQwZ_Wpg8vG0Qa0yXRvmZLDYz3BZWbzqE7g6k5UeZ4IFGxlzkyXDIxRRywZob_dg/s1600/loss.jpg" /></a></div>
</h2>
Nén ảnh lossy hoạt động bằng cách loại bỏ thông tin từ file gốc. Có 
hai phương pháp nén file cơ bản: lossy (mất dữ liệu) và lossless (không 
mất dữ liệu)<br />
<br />

Nén ảnh lossy hoạt  động thông qua việc loại bỏ thông tin từ file gốc. Vì thế bạn sẽ có thể làm nhẹ được dung lượng file ảnh.<br />

<h2>
04. Nén ảnh Lossless (không mất dữ liệu)</h2>
Ngược lại với nén ảnh lossy, nén ảnh lossess vẫn giữ toàn bộ dữ  liệu
 gốc, nhưng lại khiến cho kích cỡ file lớn hơn  đáng kể. Các định dang 
file lossy (nơi thông tin bị mất) là JPG, GIP, và MP3, trong khi 
lossless là EPS, TIF, PNG và PSD (dù PNG và TIF đều có thể là lossy).<br />

<h2>
05. Cách nén ảnh</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YdrzwODl6TBRuFF5CuJ504AvlKDZ3B6Ib3_is2pXameJkcIhOBW-WHR8j8LEWuF4a3HK21-3vrr5NaxlxQMjzRrlUqgMbgdZvFp3TCV0edEhncZb7bABLdZmTW1hvE55ZefQrKA3D64/s1600/compress1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YdrzwODl6TBRuFF5CuJ504AvlKDZ3B6Ib3_is2pXameJkcIhOBW-WHR8j8LEWuF4a3HK21-3vrr5NaxlxQMjzRrlUqgMbgdZvFp3TCV0edEhncZb7bABLdZmTW1hvE55ZefQrKA3D64/s1600/compress1.jpg" /></a></div>
<br />
Các thuật toán nén ảnh khác nhau sẽ tạo ra các tiếp cận khác nhau để giảm kích thước file.<br />
<br />

Có nhiều thuật toán nén ảnh khác nhau và mỗi thuật toán lại mang lại 
một tiếp cận khác nhau để làm giảm kích cỡ file. Ví dụ, tiếp cận đơn 
giản nhất, có tên là mã hoá độ dài loạt - Run-Length Encoding, hoạt động
 thông qua phân tích file dần dần tìm kiếm các mẫu (kiểm tra từng bit 
riêng của file – 8 bit/byte, 104 byte/kilobyte,… )<br />
<br />

Tại vị trí phân tích tìm thấy một mẫu, như 10 điểm 0 trong 1 vòng, 
không gian có thể được lưu bằng cách ký hiệu 10:0 thay vì ghi lại toàn 
bộ 10 điểm 0. Loại nén ảnh này là lossless, nhưng lại không hiệu quả để 
giảm kích thước file.<br />

<h2>
06. Nén ảnh JPEG</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVynCo6RM0ZGjqBA3ujHzFayd39nhRB02MP-vbln2KQghzxMiCobb5MtbTbzct6cTp7uUQlXOY0Dsvedrfyroeb16OZ87ak86wv-rksYxB4T93EsqR1NiDz0RvuM_gIvKbwRPI0LLxqm4/s1600/jpgexamples.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVynCo6RM0ZGjqBA3ujHzFayd39nhRB02MP-vbln2KQghzxMiCobb5MtbTbzct6cTp7uUQlXOY0Dsvedrfyroeb16OZ87ak86wv-rksYxB4T93EsqR1NiDz0RvuM_gIvKbwRPI0LLxqm4/s1600/jpgexamples.jpg" /></a></div>
<br />
Nén ảnh JPEG tách hình ảnh thành một chắp nối của các khối.<br />
<br />

Về nguyên tắc cũng không quan tâm đến định dạng nào được bạn sử dụng,
 nhưng các định dạng khác nhau sử dụng các hệ thống khác nhau để phân 
tích file và ký hiệu hoặc tạo ra các kiểu dáng.<br />

<br />
Ví dụ, JPEG image compression tách hình ảnh thành một chắp nối của 
các khối, áp dụng nén với mỗi khối bằng cách sử dụng thao tác chuyển đổi
 cosin riêng lẻ.<br />
<br />

Đây là một thao tác toán học khá phức tạp, nhưng thông tin màu sắc bị
 xóa bỏ, cùng với các thay đổi rất nhỏ về độ sáng, có thể dễ dàng được 
nhận thấy bằng mắt thường. Khi bạn so sánh bản gốc với bản được nén sẽ 
nhận thấy rõ thông tin bị mất đi. Nếu bạn nén quá bằng cách sử dụng JPEG
 thì bạn sẽ nhận được một hình ảnh khối và chắp vá.<br />

<h2>
07. Nén MP3</h2>
Ném MP3 hoạt động tương tự như nén ảnh JPEG, xóa thông tin khỏi các 
tần số mà tai chúng ta khó có thể nghe thấy. Những người mê âm thanh nổi
 luôn chế nhạo MP3 bởi họ cảm thấy những sắc thái bản ghi âm thanh gốc 
bị mất đi trong quá trình xử lý loại bỏ những tần số này để tiết kiệm 
kích thước của file, còn các họa sĩ và designer lại không thích những gì
 JPEG làm đối với các hình ảnh của họ khi áp dụng nén cao. Cả hai cần 
làm giảm dung lượng dữ liệu khi được truyền tải lên các trang web hoặc 
tới các nhà in.<br />

<h2>
08. Định dạng GIF</h2>
Việc quyết định theo loại và mức độ nén ảnh áp dụng rất phức tạp bởi 
cần phải có giấy phép. Quay lại những năm 1990, GIF (Định dạng thay thế 
đồ họa - Graphic Interchange Format) là một định dạng rất phổ biến về 
nén ảnh web (và ngày nay vẫn còn.)<br />

Định dạng này đã được phát triển vào cuối những năm 1980, và giới hạn
 tới 8bit đơn/pixel, hạn chế file tổng hợp tới tối đa 256 màu (so sánh, 
JPEG lại hỗ trợ 8 bit/kênh/pixel, cho phép tái hiện đầy đủ màu sắc). 
Ngoài ra, GIF còn hỗ trợ tính trong suốt đôi (1 pixel trong suốt hoặc 
không) và rất nhiều các khung dữ liệu hình ảnh, cho phép đối với 
flip-book animation.<br />

<br />
Vấn đề đối với GIF đã được giải quyết bằng thuật toán nén được sử 
dụng với định dạng này. LZW là một kỹ thuật nén ảnh lossless đã được 
Unisys tạo ra, ông là người đã cố gắng áp dụng quyền sở hữu bằng cách 
yêu cầu tất cả người dùng định dạng GIF phải mua cấp phép. Việc này đã 
khiến cho một số người bán phần mềm bỏ rơi GIF, và bắt đầu phát triển 
định dạng PNG (Định dạng đồ họa mạng di động - Portable Network 
Graphics) phổ biến hiện nay.<br />
<br />

PNG đòi hỏi phải có cấp  độ nén ảnh tốt hơn GIF, và thêm các tính 
năng như hỗ trợ 24 bit/pixel (3 kênh màu 8 bit cho mỗi Đỏ, Xanh Lục và 
Xanh Dương, cộng với 1 bộ  kênh 8 bit alpha – cho phép 256 cấp độ trong 
suốt!).<br />

PNG không hỗ trợ nhiều khung dữ liệu trong một file đơn. Trong PNG có
 một phát triển tách riêng có tên là APNG không hỗ  trợ nhiều khung dữ 
liệu, nhưng với định dạng PNG mở rộng năm 2007 thì vấn đề này  đã không 
còn nữa – hiện tại nó chỉ  được hỗ trợ bởi các trình duyệt dựa trên 
Opera và Gecko như Firefox.<br />

<h2>
10. Cách chọn định dạng phù hợp</h2>
Chọn lựa định dạng phù hợp để lưu giữ hình ảnh là một việc không quá phức tạp….<br />
<br />

Nếu bạn muốn in một hình ảnh, bạn sẽ cần phải có một định dạng file phân giải cao để gửi đi.<br />

Hãy quyết định xem ảnh của bạn sẽ được sử dụng ở đâu. Nếu bạn muốn in
 một hình ảnh, bạn sẽ cần phải có  một định dạng file phân giải cao để 
gửi đi. Nếu bạn đăng chúng lên web, bạn có thể thực hiện với một hình 
ảnh có chất lượng thấp hơn (và vì thế kích thước file sẽ nhỏ  hơn).<br />
<br />

Các hiển thị có mật độ pixel cao Retina mới yêu cầu hình ảnh có độ phân giải cao hơn.<br />
<br />

Hãy quyết định hiển thị hình ảnh ở kích thước gì. Hình ảnh để in 
thường được tái hiện ở 300 DPI (chấm/inch) – có nghĩa là với mỗi inch 
tái hiện, bạn cần ít nhất 300 pixel thông tin. Ví dụ, một bản in 10" x 
8" cần một hình ảnh ở 3000 pixels (10 x 300) by 2400 pixels (8 x 300).<br />
<br />

Trên màn hình, hầu hết các hình ảnh được hiển thị ở 72 DPI, dù kích 
thước này thay đổi với các hiển thị có mật  độ pixel cao Retina. Hình 
ảnh trên màn hình chủ yếu  được hiển thị 1:1 với các pixel hiển thị, vì 
 thế, nếu bạn muốn hiển thị ảnh rộng 600 pixel, bạn chỉ cần tái hiện 
hình ảnh với 600 pixel nằm ngang (không cần phải quá phức tạp).<br />
<br />

Cuối cùng, hãy chọn định dạng phù hợp nhất cho mình:<br />
<br />

GIF không phù hợp cho các hình ảnh chất lượng in hoặc ảnh, vì bảng 
màu của nó bị hạn chế, nhưng nó lại thích hợp cho hình ảnh vẽ hoạt hình 
web hoặc line art (vẽ nét đơn).<br />
JPEG là giải pháp phù hợp với tất cả các ứng dụng in và web, nhưng nên 
nhớ nó là định dạng lossy, vì thế, không nên sử dụng JPEG làm định dạng 
lưu trữ - hãy lưu file gốc của bạn trong định dạng lossless.<br />
<br />
Nếu bạn cần độ trong suốt trên web, bạn chỉ có 2 tùy chọn GIF hoặc PNG. 
Nếu bạn cần nhiều mức độ trong suốt, hãy chọn PNG – nhưng nếu bạn chỉ 
cần một vài pixel thì hãy chọn GIF.<br />
<br />
Với ảnh để in, TIFF và EPS đều là các định dạng phổ biến mà bạn có thể 
áp dụng nén ảnh lossless (và lossy), vì thế, nến nghi ngờ (và nếu kích 
thước file không quá quan trọng). hãy chọn một trong hai định dạng này 
đều có thể an toàn.<br />

<h2>
5. Các công cụ có ích</h2>
Có rất nhiều công cụ  nén ảnh cho máy tính để bàn. Sau đây chúng tôi xin giới thiệu 5 công cụ có thể rất hữu ích cho các bạn:<br />

<a _mce_href="http://www.balesio.com/fileminimizerpictures/eng/index.php" href="http://www.balesio.com/fileminimizerpictures/eng/index.php"><strong>FILEminimizer pictures</strong></a><br />

Nền: Windows<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIS6hIUWVbfcrenMbX7_wvDYNEwHU9ciScZo7eSVaNsJuIxmuEoSbHY-jPzGAHA9EO6BaAm-pMVK_6JefqSPbuXepODr112-w62d3m39PZYnIhRNAEl6FiD66M68i94PzLzcDe8hvyr68/s1600/FILEminimizer_615x466.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIS6hIUWVbfcrenMbX7_wvDYNEwHU9ciScZo7eSVaNsJuIxmuEoSbHY-jPzGAHA9EO6BaAm-pMVK_6JefqSPbuXepODr112-w62d3m39PZYnIhRNAEl6FiD66M68i94PzLzcDe8hvyr68/s1600/FILEminimizer_615x466.jpg" /></a></div>
<br />

FILEminimizer Pictures giúp bạn tiếp cận nén ảnh khá mạnh mẽ so với 
nhiều công cụ tương tự.  Nó có thể mặc định chọn các định dạng, đưa trở 
lại kích thước hình ảnh theo yêu cầu, tái mã hóa các JPEG với chất lượng
 giảm xuống và xóa bỏ lý lịch dữ liệu để co hình ảnh.(Bạn có thể điều 
chỉnh hầu hết bằng các cài đặt của chương trình.)<br />
<br />

Hãy chỉ rõ nó  trong các file nguồn của bạn, chọn một thư mục  đầu 
ra, có thể lập cấu hình một hoặc hai tùy chọn, nhấp chuột để bắt đầu quá
 trình tối ưu hóa. Và quá trình này diễn ra khá nhanh, nên bạn không 
phải mất nhiều thời gian chờ đợi. Nó rất linh hoạt, có thể lập cấu hình 
và dễ sử dụng.<br />
<br />

<a _mce_href="http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer" href="http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer"><strong>FileOptimizer</strong></a><br />

Nền: Windows<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXskmHw9weQYwFIObMktAHAVoHEdbtE_JyfQTBw7PONBB49ErBId_CiYEZW3C3egVRuxoSi19UewcGQSTizXBffqDo1iSwMNSC1Ef3JXtpZGp__8U5ugcKpOjxBy4NHcHf_bPRppBM7CA/s1600/FileOptimizer_615x463.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXskmHw9weQYwFIObMktAHAVoHEdbtE_JyfQTBw7PONBB49ErBId_CiYEZW3C3egVRuxoSi19UewcGQSTizXBffqDo1iSwMNSC1Ef3JXtpZGp__8U5ugcKpOjxBy4NHcHf_bPRppBM7CA/s1600/FileOptimizer_615x463.jpg" /></a></div>
<br />

FileOptimizer có thể nén hình ảnh JPG, GIF và PNG, cũng như các file 
khả thi, nơi lưu trữ, tài liệu Microsoft Office, các file PDF,… Nó có 
một trong những giao diện dễ thực hiện nhất mà chúng ta đã biết: kéo và 
thả hình ảnh vào FileOptimizer, nhấp chuột phải, chọn Optimize và đó 
chính là nó.<br />

Chương trình sẽ thay thế các file nguồn của bạn, sau đó gửi vào 
Recycle Bin, rất đơn giản. Hơn nữa, nén là một công đoạn rất quan trọng,
 và tại đây chính là nơi FileOptimizer giao trả kết quả.<br />
<br />

<a _mce_href="http://imageoptim.com/" href="http://imageoptim.com/"><strong>ImageOptim</strong></a><br />

Nền: Mac<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUbRb3RGc-c7tFX_nV2h56Gkq9eLQyYaUfGiu5paqsDl7FTKYCjoYrRu3eW437NQ1XBgV-ShBYs9nMsMwp5E9utWDAVwRJHahSSQmWHTI87EWTTQSwwOQ94o7RaxL_bMP5FLdtV9BSyY/s1600/ImageOptim.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUbRb3RGc-c7tFX_nV2h56Gkq9eLQyYaUfGiu5paqsDl7FTKYCjoYrRu3eW437NQ1XBgV-ShBYs9nMsMwp5E9utWDAVwRJHahSSQmWHTI87EWTTQSwwOQ94o7RaxL_bMP5FLdtV9BSyY/s1600/ImageOptim.jpg" /></a></div>
<br />

ImageOptim là một công cụ Mac tối ưu hóa hình ảnh GIF, JPEG, và PNG 
thực hiện như một front end (mặt trước) của một máy chủ các ứng dụng 
khác: PNGOUT, AdvPNG, Pngcrush, OptiPNG mở rộng, JpegOptim, jpegrescan, 
jpegtran, và Gifsicle.<br />
<br />

Chương trình dùng để nén lossless – xóa bỏ các comment, các profile 
màu,… - tái mã hóa hoặc làm giảm số lượng màu sắc. Do đó, nó sẽ không 
cắt các kích cỡ file như một số công cụ khác, nhưng ít nhất bạn cũng 
không phải lo lắng về việc ảnh bị giảm chất lượng.<br />
<br />

Mặt trước của ImageOptim cũng hoạt động rất tốt. Kéo trên một fle 
đơn, một nhóm hoặc 1 thư mục,…, và ngay lập tức, nó bắt đầu nén ảnh và 
hiển thị các kết quả. Chương trình không phải là công cụ nhanh nhất, 
nhưng nếu bạn không nhồi cho nó hàng nghìn HD JPEG thì có thể không vấn 
đề gì.<br />
<br />

<a _mce_href="http://www.jpegmini.com/" href="http://www.jpegmini.com/"><strong>JPEGmini</strong></a><br />

Nền: Mac<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Lpgh5B4xCUf_XvQsb5vXTK1dpfj1zShzCW2EGTxdO8ZFvepPS3M1jAWcAg7Iaip-qtuTqlKAJoXpd07SeHRVnVKUHbhBt-LLV08AIEDGKp_vjpEmSPpemFYQJmSd4r07b5cJlQTw548/s1600/JPEGmini_615x497.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Lpgh5B4xCUf_XvQsb5vXTK1dpfj1zShzCW2EGTxdO8ZFvepPS3M1jAWcAg7Iaip-qtuTqlKAJoXpd07SeHRVnVKUHbhBt-LLV08AIEDGKp_vjpEmSPpemFYQJmSd4r07b5cJlQTw548/s1600/JPEGmini_615x497.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />

JPEDmini là một ứng dụng Mac rất thú vị với cách tiếp cận hai hướng 
để co JPEG. Đầu tiên, nó sử dụng một thuật toán thông minh nhằm tính 
toán có thể nén một hình ảnh với kích cỡ bao nhiêu mà không hiện rõ các 
hiệu ứng (vì thế, chương trình không lossless, nhưng cũng không tái mã 
hóa ở một số cài đặt chất lượng cố định). Sau đó, chương trình sử dụng 
bộ mã hóa JPEG riêng để thử và chuyển các file nén nhất có thể.<br />
<br />

Chúng có rất nhiều ở nền phụ, nhưng người sử dụng không thể nhìn 
thấy. Hãy chỉ kéo và thả ảnh của mình lên trên chương trình (tối đa 
20/ngày đối với bản miễn phí) và nó sẽ thay thế các ảnh gốc bằng các bản
 đã được nén.<br />
<br />

Với đồ họa web đơn giản, JPEGmini không có gì quá đặc sắc. Khả năng 
nén tăng lên đáng kể vì hình ảnh của bạn lớn hơn. Nếu hình vẽ của bạn 
lớn thì chương trình sẽ có bản dùng thử dành cho bạn sử dụng.<br />
<br />

<strong>Smush.It</strong><br />

Nền: Web<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CBHbqsodwqJrCaetdYWUZFgkXwg9EKWv7BdJ7maT2VqdKzf_h19Tq_FNcUia3kcI7sIYrHSZ08HAkheYdd7AcAJJ5Viawru2dNEi4c_4A4eLn3pSGwMrzcExHe9gwx1sQF0sPGhRuoA/s1600/SmushIt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CBHbqsodwqJrCaetdYWUZFgkXwg9EKWv7BdJ7maT2VqdKzf_h19Tq_FNcUia3kcI7sIYrHSZ08HAkheYdd7AcAJJ5Viawru2dNEi4c_4A4eLn3pSGwMrzcExHe9gwx1sQF0sPGhRuoA/s1600/SmushIt.jpg" width="320" /></a></div>
<br />

Hầu hết các dịch vụ  web nén ảnh đều bị hạn chế nhiều, nhưng Yahoo's 
Smush.It lại là một trường hợp ngoại lệ hiếm hoi. Bạn bị hạn chế tải lên
 các file có kích cỡ trên 1MB, vâng, nhưng mặt khác, hệ thống sẽ tải lên
 nhiều hình ảnh như bạn cần. Không phải đăng ký, không phải tạo tài 
khoản, không cần các chỉ tiêu hàng ngày. Các hình ảnh được tốc hoạt với 
rất nhiều công cụ khác nhau, cho phép bạn tải về các kết quả ở một file 
ZIP.<br />
<br />

Nếu tiếp cận này gặp sự cố, chính các công cụ nén sẽ tách bạn ra. Bạn
 sẽ không thể lập cấu hình hoặc ngắt chúng bằng bất cứ cách nào. Kết quả
 bạn thấy là những gì bạn nhận được và bạn sẽ không thể làm bất cứ điều 
gì để thay đổi chúng.<br />
<br />

Sau khi cân nhắc kỹ, chúng tôi vẫn thích sự tự do và khả năng lập cấu
 hình của công cụ cục bộ hơn, nếu dịch vụ online thuận tiện phù hợp với 
nhu cầu của bạn thì hãy chọn Smush. Có thể đó là một sự lựa chọn rất hợp
 lý.<br />
<br />

<div style="text-align: right;">
<strong>Dịch theo creativebloq | BBT RGB.vn<br />
</strong></div>

Hướng dẫn thủ thuật nén hình ảnh

Bạn không biết làm thế nào để chuyển các hình ảnh PNGs sang JPEGs? Sau đây, chúng tôi sẽ hướng dẫn thủ thuật nén hình ảnh giúp bạn hiểu rõ...

Đọc thêm »