Một số phương pháp thay thế photoshop khi thiết kế web cho người mới

 

Lưu ý là tôi đang đề cập đến xây dựng web bằng mã nguồn mở, do đó kinh nghiệm bên dưới là dùng cho trường hợp này.
Nếu tự xây dựng một website với thiết kế riêng hoặc tạo giao diện (themes) cho các trang web thì bạn hãy mau đi học Photoshop, vì nó giúp thiết kế Layout hay Template rồi xuất ra mã HTML tự động cho chúng ta chứ không phải photoshop thì chỉ để xử lý ảnh.
Nếu dùng nguồn mở, bạn đã có sẳn tất cả, giờ chỉ việc “tút” nó lại tạo phong cách riêng mà thôi. Chúng ta bắt đầu thôi:

1 Dùng CSS/CSS3 và Javascript

Dùng CSS (hiện nay là CSS3) bạn sẽ tạo ra được nhiều hiệu ứng hình ảnh mà ko cần phải dùng đến trình xử lý ảnh, cho một vài ví dụ như: Bo góc, tạo bóng, tạo độ mờ cho ảnh, thêm khung ảnh, tạo các nút nhấn,… Rất nhiều thứ để bạn có thể làm với CSS mà không cần một hình ảnh nào cả.
Javascript không thiên về định dạng mà giúp tạo ra các hiệu ứng “động” như chuyển trang, cuộn trang, ảnh động,…
Các bác tìm hiểu về CSS và Javascript tại đây: http://www.w3schools.com/

2 Sưu tầm hàng miễn phí trên internet

Bạn có thể tìm thấy rất nhiều thứ có thể sử dụng cho dự án web của mình được cung cấp miễn phí trên Internet, ví dụ: Biểu tượng (Icon), Hình nền (Background), Mặt cười (Emotion, Smiley),…
Ví dụ, Các icon dùng trên vntopic.net cũng được sưu tầm từ Internet :lol: :-) :idea: .

Các bạn có thể tham khảo ở một số trang sau:
Icon: http://www.flaticon.com/
Background: http://www.vecteezy.com/

3 Dùng font Awesome

Là một loại font nhưng thiết kế thành icon phù hợp để tích hợp vào web. Hiện nay xu hướng thiết kế web thường sử dụng cái này vì tính tiện lợi và thư viện rất đa dạng các icon. Nó giúp trang web nhẹ hơn là dùng icon bằng file ảnh tạo từ photopshop.
Nếu để ý trên Vntopic.net có khá nhiều icon, thì đó hầu hết đều là Awesome.

Cách sử dụng:

Dán đoạn này vào sau thẻ <header> trang web của bạn:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Để hiển thị icon thì bạn dùng đoạn mẫu sau:
<i class="fa fa-commenting"></i>

Thay fa-camera-retro bằng tên của các icon bạn muốn hiển thị.
Tham khảo “hình dáng” của icon và tên class hiển thị chúng, vào link này:
http://fontawesome.io/icons/

Một số tùy biến cho icon:

– Tăng độ lớn icon: fa-2x, fa-3x,…
– Thêm border: fa-border
– Thêm hiệu ứng xoay vòng: fa-spin
– Xoay vòng trong 8 bước: fa-pulse
– Xoay icon theo các góc nào đó: fa-rotate-90, fa-rotate-180,…

Các ví dụ:

Tăng size lên 4 lần:

<i class="fa fa-commenting fa-4x"></i>

Xoay 90 độ:

<i class="fa fa-battery-3 fa-rotate-90 fa-3x"></i>

Xoay vòng:

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>



Màu hồng cho icon:

<i style="color: pink" class="fa fa-commenting fa-3x"></i>

Bạn có thể tham khảo các tùy biến khác ở đây:
http://fontawesome.io/examples/

Lưu ý: đó là cách nhanh gọn nhất để dùng awesome, nhưng bạn sẽ phải phụ thuộc vào các trang web trên, nếu chẳng may trang web trên bị die, các icon sẽ ko hiển thị nữa. Cho nên để chuyên nghiệp hơn, bạn có thể tải toàn bộ các file cần thiết về để sử dụng, nó sẽ bao gồm các file .css, file font chữ,…

Tải ở đây: http://fontawesome.io/

4 Sử dụng các tiện ích xử lý ảnh sẵn có

Nếu bạn chỉ xử lý ảnh cơ bản như chèn text, cắt xén, thu nhỏ ảnh, đổi định dạng,…mà không cần nhiều hiệu ứng bạn có thể sử dụng các phần mềm có sẵn của Windows hoặc Office, đó là Paint và Microsoft Office Manager.
Bạn cứ thử đi, tôi tin là 2 phần mềm này cũng làm được khá nhiều việc đấy.

Cảm ơn các bạn đã xem. Mọi vấn đề thắc mắc, vui lòng dùng khung bình luận.


Xem thêm:
loading...
loading...

Like nếu bạn thấy hay, và nhớ chia sẻ cho bạn bè
 
Bình luận với tài khoản Facebook:

Trả lời

Thư điện tử 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 *