Thiết kế website tối ưu bằng photoshop

thiết kế website đà nẵng

Thiết kế đồ họa và thiết kế website là hai lĩnh vực khác nhau và có những yêu cầu riêng biệt, một  bên là thực hành và một bên là phương pháp.

Ví dụ, thiết kế website rất dễ dàng khi sử dụng các định dạng file dựa trên pixel hay raster ( như JPG, GIF hoặc PNG). Ngược lại, các file vector như EPS và AI – có thể mở rộng được mà không dựa vào pixel – thường phù hợp với thiết kế đồ họa hơn, cho những thứ như logo có thể được sử dụng ở nhiều kích cỡ khác nhau. Thiết kế đồ họa dựa trên vector cho website ( như SVG hoặc HTML5 canvas) không phổ biến và tương thích, hỗ trợ cho mọi trình duyệt.

Thêm vào đó, đồ họa có ý nghĩa lớn đối với website có tiêu chuẩn kỹ thuật cao. Một trong những tiêu chuẩn cao nhất đó là bạn phải nhận biết được độ lớn của file bởi bạn muốn các trang web của mình được load nhanh nhất có thể. Là một nhà thiết kế website, bạn phải cố gắng giảm thiểu khối lượng HTTP requests  bằng đồ họa – có thể bằng việc giảm dung lượng của các hình ảnh hoặc kết hợp một số ảnh trong một CSS spite -  cũng như chắc rằng bạn chọn đúng định dạng ảnh – giúp đạt được độ cân bằng hoàn hỏa giữa file size và chất lượng ảnh.

Photoshop là một công cụ rất mạnh được sử dụng cho cả thiết kế đồ họa và thiết kế webiste. Những điều dưới đây là một số lời khuyên đơn giản cho phép bạn thiết kế đồ họa phù hợp trên các website.

1. Tối ưu đồ họa với chức năng “ Save for Web & Devices”

Trong thiết kế website, bạn phải chắc rằng các hình ảnh của bạn có dung lượng nhỏ nhất có thể, nhưng điều quan trọng hơn đó là các hình ảnh này cũng phải được đẹp mắt.

Thiết kế đồ họa hoàn hảo trong photoshop phải cân bằng được chất lượng và dung lượng.

Một lỗi thường gặp của trong thiết kế website đó là sử dụng “Save as” thay vì chọn “Save for web & devices” trong Photoshop.

thiết kế website đà nẵng

Chức năngSave for Web & Devices tạo ra các file tối ưu cho thiết kế website, về chất lượng hình ảnh, độ phân giải hình ảnh, tương thích trình duyệt và dung lượng.

Thêm vào đó, khi chức năng này được bật lên, có một cửa sổ hiện ra mà bạn có thể sử dụng để tinh chỉnh các hỉnh ảnh. Trong khi điều chỉnh các thông số trong đồ hòa, nó sẽ cũng sẽ show trực tiếp kích cỡ và chất lượng ảnh cho bạn xem.

thiết kế website đà nẵng

Nếu so sánh, Cửa sổ Save as không có nhiều tùy chọn và thường tạo ra các hình ảnh có dung lượng hơn hơn.

thiết kế website đà nẵng

Dưới đây là so sánh khi cùng save một bức ảnh  bằng Save for Web & Devices và Save as. Chú ý rằng dung lượng khác nhau hoàn toàn.

thiết kế website đà nẵng

2. Chú ý sử dụng màu sắc tối ưu cho website

Web-safe colors sẽ hiển thị đúng trên hầu hết các trình duyệt và trên các màn hình, đảm bảo website của bạn nhìn giống hệt nhau ở mọi nơi.

Dưới đây là hai cách dễ dàng nhất để đảm bảo màu sắc mà bạn sử dụng tối ưu cho website.

The two easiest ways to guarantee that the colors you use are web-safe are as follows.

"Only Web Colors" Option

Trong Cửa sổ Color pichker, đánh dấu vào “Only web colors” nằm ở bên trái góc dưới. Nó sẽ giới hạn các màu sắc được hiển thị trên cửa sổ để tối ưu màu sắc cho website.

thiết kế website đà nẵng

Chuyển đổi một màu sang một màu tối ưu.

Chuyển mọi màu sắc sang mức độ tối ưu màu cao nhất bằng việc click vào khối lập phương nhỏ trong Color picker ( bên cạnh Curent and new color box)

thiết kế website đà nẵng

3. Chú ý sử dụng “ Progressive scan “ cho JPG

Định dạng JPG là một định dạng lý tưởng cho ảnh chụp và những hình ảnh có độ phân giải cao. Progressive scan là một cách hiển thị ảnh rất hay, hình ảnh được hiện ra từ từ khi website đang load ( mặc dù ngày ngay với những kết nối internet băng thông rộng việc này ít khi xảy ra). Nó cho phép người dùng có thể nhìn nhanh hình ảnh trước khi chúng được download đầy dủ, tạo cho trang web cảm giác load nhanh.

thiết kế website

4. Save Graphics with Transparency as PNGs

Định dạng PNG rất tốt cho các hình ảnh được hiển thị trong suốt (transparency)

thiết kế website

PNG transparency được hỗ trợ trong hầu hết các trình duyệt phổ biến nhưng cẩn thận nếu hình ảnh được hiển thị trên IE6; các phẩn của PNG được làm trong suốt sẽ xuất hiện với màu xám. Lỗi này thường rất khó được khắc phục.

5. Lưu ảnh động dưới định dạng GIFs.

Định dạng ảnh GIF, hiện nay bị thay thế gần như hoàn toàn bởi PNG, vẫn còn hữu ích cho một số việc. Tuy nhiên, chỉ có GIF mới có khả năng ảnh động.

thiết kế website đà nẵng

6. Chú ý thông tin thời gian download

Thời gian load của website là vô cùng quan trọng, điều này làm cho việc giảm bớt và tối ưu đồ họa rất cần thiết. Dưới đây, nhìn xem chỉ một thay đổi nhỏ trong việc lưu file có thể làm gì đối với dung lượng ảnh.

JPEG tại Maximum Quality

thiết kế website đà nẵng

JPEG tại Low Quality

thiết kế website

Khi bạn đang tối ưu hóa hình ảnh, luôn chú ý tới thời gian download. Nó được hiển thị ở bên trái góc dưới của cửa sổ Save for Web & Devices. Dưới đây, bạn có thể thấy rằng hình ảnh được lưu sẽ mất khoảng 2 giây dowload trên kết nối internet DSL ở setting hiện tại.

thiết kế website đà nẵng, web360

Gửi phản hồi

    Ý kiến của bạn:
captcha

Khách hàng thân thiết

Ý kiến khách hàng

  • Thiết kế web Đà Nẵng

    Tôi rất vui vì đang sử dụng gói website do Web360 thiết kế. Có thể nói đây là dịch vụ web giá rẻ nhưng chất lượng lại tuyệt vời nhất mà tôi từng sử dụng. Hiện tại website của tôi đang phát triển và có rất nhiều đơn đặt hàng qua mạng Internet. Cảm ơn Web360 rất nhiều.

    Thiết kế web Đà Nẵng
    Đại diện
    Công ty TNHH Thương mại và Dịch vụ Bạch Đằng
    Dai-dien-Bach-Dang-logo.png
  • Thiết kế web Đà Nẵng

    Tôi rất hài lòng về dịch vụ của Web360, đặc biệt là quản trị admin rất dễ sử dụng với nhiều tính năng ưu việt. Tôi cảm thấy rất vui mỗi khi vào trang web của mình. Cảm ơn Web360 rất nhiều và chúc công ty luôn phát triển thịnh vượng.

    Thiết kế web Đà Nẵng
    Ngọc Ánh
    Bất động sản Sao Nhiệt Đới
    Ngoc-Anh-saonhietdoi.jpeg
  • Thiết kế web Đà Nẵng

    web360 đã xây dựng cho tôi một website rất đẹp, tôi rất ưng ý. Ngoài ra các nhân viên của web360 đã hỗ trợ tôi rất nhiệt tình. Các khách hàng đến với chúng tôi cũng ngày một nhiều hơn từ khi có website.

    Thiết kế web Đà Nẵng
    Bà Đỗ Lan Phương
    Permayshop
    Ba-Do-Lan-Phuong-52d94107ef8a6ee0a7497328264ee2b1.png
  • Thiết kế web Đà Nẵng

    Qua thời gian lựa chọn nơi thiết kế và duy trì SEO website thì tôi đã quyết định chọn web360. web360 đã làm tôi rất hài lòng về sự nhiệt tình, chu đáo và hơn cả là trang web của tôi rất đẹp, đặc biệt rất dễ sử dụng. Tôi rất vừa ý với trang web công ty đã thiết kế. Hơn thế nữa website tôi đem lại doanh thu đáng kể từ sau khi có web. Chúc Web360 ngày càng thịnh vượng & phát triển.

    Thiết kế web Đà Nẵng
    Ông Huỳnh Ngọc Văn
    Phó phòng bàn hàng TOYOTA Đà Nẵng
    Ong-Huynh-Ngoc-Van-logo-toyota.jpg