Những lỗi lưu ý cần tránh khi thiết kế giao diện web bằng Photoshop

Bạn đã sử dụng tốt Photoshop? Hoặc bạn đang học Photoshop? Tất cả nên đọc chia sẻ thiết kế giao diện web bằng photoshop này. Các lưu ý dưới đây rất đơn giản để những người thiết kế ghi nhớ khi bắt đầu một dự án. Sẽ có những điều bạn đã biết, nhưng cũng có những điều bạn bỏ quên.

Nếu  bạn đã thành thạo sử dụng công cụ photoshop, đừng bỏ lỡ cơ hội có thể thiết kế 1 website hoàn hảo bằng công cụ photoshop qua bài viết Thiết kế web bằng photoshop CS6 nhé

Tổ chức bên ngoài

Thu gọn file PSD : Đừng e ngại về kích thước file quá lớn khi thiết kế giao diện web bằng photoshop vì hiện tại máy tính đã tốc độ rất mạnh. Bạn hãy cho tất cả các thiết kế vào một file Psd duy nhất.

Đặt tên file thích hợp: Đừng đặt tên file quá dài để tránh sa vào mớ hỗn loạn với file final, file new final…etc.

Cần đặt tên file ngắn gọn, trong một folder tên dự án. Đặt một thư mục có tên “Tư liệu” sau đó copy những gì liên quan vào đó.

Tạo thư viện cho những thiết kế tương tác.

Thiết kế giao diện web bằng photoshop là một công việc rất phức tạp, ngoài việc thiết kế một trang chủ đẹp mắt thì bạn còn phải tạo ra ti tỉ thứ nhỏ nhặt khác ví dụ như mẫu đăng nhập, ô tìm kiếm, popup, các loại icon…etc. Hãy tạo một thư viện với các mẫu dành cho dự án đó

thiết kế giao diện web bằng photoshop
Thiết kế giao diện web với photoshop

Tổ chức trong file

Đặt tên layer dễ hiểu : Theo giáo trình thiết kế web bằng photoshop thì nên đặt tên rõ ràng cho từng Group, từng Layer, nhớ đừng dùng những tên mặc định.

Tổ chức các layer hợp lý và các layer của phần header nằm trong folder header, layer của Footer thì nằm trong Folder Footer và chọn màu cho chúng nếu thích.

Một file gọn gàng, dễ hiểu sẽ giúp bạn hoặc người khác dễ dàng trong lần làm việc kế tiếp.

Sử dụng Grid: Có thể gặp khó chịu khi thấy dùng những đường grid màu xanh của Photoshop nhưng nó lại là điều BẮT BUỘC phải dùng khi thiết kế.

Xóa đi những layer, folder không sử dụng: Ẩn đi các lớp có thể sử dụng nhưng bạn nên chắc chắn xóa những layer mà không bao giờ sử dụng, đừng để những thứ nhỏ nhặt đó làm phiền bạn hoặc người sử dụng file của bạn.

Những yếu tố sử dụng chung: Nên cho những layer sử dụng chung đứng riêng, tránh lặp lại 1 layer giống nhau trong nhiều folder.

thiết kế giao diện web bằng photoshop
Tổ chức file hợp lý

Làm việc với văn bản

Làm tròn các kích thước chữ: Nguyên tắc tối kỵ trong thiết kế giao diện web bằng photoshop khi sử dụng chữ là bạn co kéo Text bằng công cụ Free Transform, nên gõ kích thước tròn số cho chữ.

Tham khảo các bài viết về thiết kế web khác tại đây.

Làm việc với Shape: Nên vẽ lại shape mới khi cần chứ đừng dùng shape đã có rồi và co kéo nó.

Hãy tạo Mask cho 1 folder thay vì Mask trên từng layer. Sử dụng Mask còn giúp bạn giữ file gốc không bị biến đổi.

Sử dụng SNAP: Thiết kế giao diện web bằng photoshop ban đầu bạn sẽ khó chịu khi không thể kiểm soát được vật thể khi di chuyển, nhưng nó sẽ tiết kiệm thời gian để canh hàng từng đối tượng.

Một đối tượng mà đã rasterized thì tốt nhất bạn nên dùng tính năng Color Overlay trong bảng Layer option.

Nếu bạn sử dụng Texture cho nền hay khu vực nào đó, tốt hơn hết là chúng là hoa văn lặp lại.

Khi bạn để Gradient cho hiệu ứng của mình thì hãy tính tới điều xảy ra khi chiều cao nội dung thay đổi.

Thực hành thiết kế

Tạo bóng đổ tinh tế: Trong nhiều trường hợp bóng đổ thích hợp, nhưng hãy nhớ sử dụng nó vừa phải.

Nắm rõ về Stroke: Trong bảng Layer Option, nếu bạn để Inside Stroke nét của bạn sẽ có góc vuông còn nếu để Outside Stroke nó sẽ làm tròn.

Ngoài photoshop cách thiết kế web bằng WordPress bóng đá tự gia công cao cấp luôn được bảo mật cao về giao diện chuyên nghiệp, mã nguồn gia công đủ và đáp ứng cho yêu cầu khách hàng hiện tại. Bạn có thể tham khảo tại bài viết cách thiết kế web bằng wordpress.

Trước khi Export nên đọc thử, so sánh wireframe

Export tiết kiệm dung lượng cho web và chọn Progressive

thiết kế giao diện web bằng photoshop cs6
Không được phá vỡ các quy tắc trong thiết kế web

Ở trên là những lưu ý cần tránh khi thiết kế giao diện web bằng photoshop các bạn đọc và tham khảo nhé.

Những lỗi lưu ý cần tránh khi thiết kế giao diện web bằng Photoshop
Rate this post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *