Photoshop Easy-Hard part 212

Tham khảo tài liệu photoshop easy-hard part 212, công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Photoshop Easy-Hard part 212 Tối ưu hình ảnh cho trong thiết kế webPhần 1:Trong Tut này, các bạn sẽ theo dõi cách tối ưu hóa hình ảnh dạng .gif và .JPEGcho xuất bản web. Việc tối ưu có thể sử dụng ImageReady và trong PhotoshopPhần 1:Tối ưu hóa hình ảnh định dạng JPEG trong PhotoshopFF mở bức ảnh nàyBạn chọn File > Save for web, như hình 1Bạn thấy là hình ảnh của bạn trông rất xấu vì mặc định của PTS là tối ưu định dạng.gif. Bạn hãy đổi thành jpeg như hình 2Bạn có thể thay đổi để chọn 2-up hay 4-up, hình 3 là FF chọn 4-up.Bạn hãy để ý một chút về các thông số bao gồm: ở hình gốc chỉ có kích thước file,các hình còn lại có: định dạng ảnh, kích thước file, thời gian tải (mặc định cho tốcđộ 28.8kbps) và bên góc phải là chất lượng file sau khi tối ưu (Optimize). Bạncũng sẽ có vài cách để optimize, bạn sẽ theo dõi sau đây 2 phương pháp. Tùy từngloại ảnh, bạn sẽ chọn phương pháp phù hợp.Phương pháp 1:Việc tối ưu là làm giảm thời gian load, và đảm bảo chất lượng ảnh như bạn mongmuốn. Bây giờ, trong hình 4, bạn sẽ để ý thấy một số thông số như Quality: bạn sẽthay đổi được từ 0 – 100 và quality càng thấp, kích thước file càng nhỏ, load càngnhanh nhưng chất lượng càng kém, thông số thứ 2 là Blur, Blur càng lớn, ảnh càngmờ nhưng thoài gian load càng nhanh.Công việc của bạn là điều chỉnh Quality và Blur để đạt chất lượng ảnh Jpeg nhưmong muốn với thời gian tải là nhỏ nhất.Với tấm hình này, FF chọn các thông số như hình 5,và bạn có thể so sánh kết quả trước và sau trong hình 6.Như vậy là tạm chấp nhận được, khi so sánh một bức hình 829Kb còn lại 39Kb.Nếu bạn đã hài long, click vào nút Done.Tuy nhiên, nếu bạn không hài long vì thời gian load còn cao, hãy giảm chất lượngđi chút ít của ảnh gốc, ví dụ chỉnh lại Brighness/Contrast và Hue/Satuation.Ví dụ sau khi FF chỉnh lại một vài thông số của ảnh gốc. FF giảm Satuation vàgiảm Contrast. (Cái này là để giảm chất lượng ảnh gốc thôi). Các công cụ này nằmtrong Image > Adjustment.Kết quả là FF giảm thời gian load còn 13s. Như trong hình 7. Click Done nếu bạnthấy hài lòng. Hoặc Save lại nếu bạn muốn sử dụng sau.Chú ý: Hình mà FF mở là hình có màu sắc tươi sáng nên kích thước file khó giảmnhiều, tuy nhiên với các hình ảnh màu sắc thấp độ tương phản, bạn có thể tăng hơnthời gian load mà vẫn đảm bảo chất lượng, bạn hãy nhìn vào những quả nho xanh,sẽ thấy gần như chất lượng không thay đổi nhiều, trong khi các quả nho tím, lạigiảm hẳn chất lượng hình ảnh.Phương pháp 2:Bạn mở hình mẫu 2, đây là một hình có màu nền có một mảng màu tối, do đó sẽthích hợp cho bạn sử dụng Alpha Chanel để tối ưu.Các bạn xem hình FF đã tạo, có 2 vùng rõ ràng như trong hình 8.Bây giờ, hãy giữ Ctrl và click chuột trái vào Layer dưới, có chứa hình hoa và conbướm. Một vùng chọn hình thành như hình 9.Chọn Select > Save Selection (hình 10)và đặt tên, FF đặt là Optimize1. Như hình 11.Hãy kiểm tra trong Chanel Pallet, đã có thêm một chanel mới có tên Optimize1(hình 12).Ấn Ctrl + D để bỏ vùng chọn, chọn File > Save for web.Bạn thấy là các thông số đã được lưu như lần trước. Giờ hãy tăng Quality lên làmcho ảnh đẹp hơn tý. FF chọn Quality là 50, Blur là 0.1 và chất lượng thu được khátốt, nhìn đôi cánh con bướm là biết, thời gian load là 21s và kích thước file là 57kb.Bây giờ, bạn click vào cái ô nhỏ tròn bên cạnh Quality, như hình 13,Chọn Chanel là cái bạn mới lưu hồi nãy (hình 14), Optimize1.Bạn sẽ thấy có 2 con trượt để bạn điều chỉnh Quality, như hình 15.Hãy điều chỉnh một cách khéo léo, sau khi đã hài long, click OK và theme chútBlur nữa và kết quả của FF như hình 16.Thời gian load bây giờ là 16s và kích thước file là 45kb.-----Phần 2:Tiếp theo cho .GIF.Chúng ta sẽ bắt đầu với việc bạn tạo ra một Logo, và FF sẽ sử dụng LogoVietphotoshop.com Car cho Tut của mình. Việc design logo sẽ không nói cách làmthế nào vì phụ thuộc vào bạn. Việc tối ưu hình .gif sẽ dễ hơn trong ImageReady(IR), vì vậy FF sẽ thực hiện trong IR.Ấn Ctrl + Shift + M để chuyển sang IR. Logo của FF như hình 17.Bạn cũng chọn Optimize, cũng có các tùy chọn như bạn đã làm hồi nãy với ảnhjpeg. Bạn chú ý vài thứ ở đây như trong hình 18. Gồm: Format: gif (chỉ có nhiềunhất 256 màu thôi), Reduction (để chọn phương pháp tối ưu cho bạn), color (chọnsố lượng màu), Dither (phương pháp dither), Transparency (bảo toàn trong suốthay không), Matter (chọn một màu nền, tý nữa bạn sẽ thấy nó hiệu quả thế nào vớihình gif có transparency), ngoài ra còn có Lossy, …Bạn chọn 2-Up để xem và so sánh kết quả cho dễ.Ở đây, FF chọn Reduction là Selective (Bạn tùy chọn loại Reduction miễn là bạnthấy chất lượng ảnh và file size nhỏ là được) vì nhìn nó có vẻ “ngon” nhất. Bạn sẽlần lượt thay đổi các thông số khác cho file size là nhỏ nhất. Trong tut này, FF sẽtập trung vào vụ số lượng màu sao cho thời gian load là nhanh nhất.Hiện tại như trong hình 19, bạn thấy là thời gian laod là 3s, kích thước file là6.5Kb. Vậy là lâu cho một logo có kích thước 300x200pixels.Trong ô Color, bạn hãy lần lượt giảm số màu bằng cách chọn số màu sao cho nhỏnhất mà logo của bạn nhìn vẫn đẹp. Ở đây FF chọn số màu là 16 và kích thước filelà 4kb. Tuy nhiên bạn có thể chọn 8 màu với thời gian load là 2s và file size là3.2Kb.Hình 20.Bạn cũng có thể thay đổi các giá trị trng Dither để có file size là nhỏ nhất. Nhữngcái này phụ thuộc vào bạn.Hãy để ý về các màu trong bảng màu, các màu bạn nhìn thấy trong đó là các màutrình duyệt có thể hiển thị. (hình 21). Nếu màu không thể hiện thị bởi trình duyệt,bạn sẽ thấy có một ô nhỏ trong tâm của ô màu.Trong một số trường hợp, bạn cần phải giữ một số màu nào đó. Ví dụ trong hình,khi FF chọn số màu là 4. Màu ở hình chiếc xe đã biến mất, thay vào đó là một hìnhđậm hơn. FF cần phải giữ màu sắc này. Như hình 22Chọn lại 16 màu, sử dụng công cụ EyeDrop Tool, và click vào màu bạn cần giữ.Như hình 23.Bạn để ý màu bạn chọn trong bảng màu. Hình 24.Bạn hãy click vào hình cái ổ khóa, như hình 25. ...