Top 10 Web safe fonts

Nguyễn Duy Nhân    @Web design     design, font

Khái niệm Web safe font có thể hiểu là bộ mã font cho web có thể tương thích và hiển thị tốt ở tất cả các trình duyệt và làm việc tốt với PC cho dù nó cài đặt hệ điều hành nào, ứng dụng nào. Bây giờ, nếu bạn là một nhà phát triển website, mối quan tâm của bạn có thể là việc người dùng của bạn có thể đọc được nội dung bạn cung cấp cho dù đang duyệt web bằng hệ điều hành nào(Window, Mac hay Linux), trình duyệt nào đi chăng nữa. Chi tiết

Sử dụng Padding và Margin trong thiết kế website

Nguyễn Duy Nhân    @Web design     CSS, margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding-right, padding-top

CSS đem đến cho chúng ta những giao diện gọn nhẹ hơn cách thiết kế website bằng table truyền thống. Trong bài viết này chúng ta sẽ cùng nghiên cứu về 2 thuộc tính được sử dụng khá nhiều trong thiết kế website dựa trên CSS: padding và margin. Chi tiết

Kĩ thuật ghép ảnh với Photoshop

Nguyễn Duy Nhân    @Web design     design, ghep anh, hinh anh, photoshop

Sẵn đang tìm tut để ghép vài cái ảnh cá nhân của mình lại thì gặp cái tut về chỉnh sửa ảnh khá hay của bạn Gấu Trúc trên diễn đàn VietPhotoshop nên đăng lại phòng hờ khi có dịp dùng đến và share với anh em luôn.

3 stock trong bài được lấy ở đây ở đây:
Thác nước: http://www.sxc.hu/browse.phtml?f=view&id=892805
Lâu đài: http://little-stock.deviantart.com/
Bầu trời: http://singularstock.deviantart.com/

B1: Bạn đặt 2 tấm hình như hình bên dưới

Vì hai tấm hình Stock chúng ta dùng ở bài viết này có kích thước tương đương với nhau nên tạm thời chúng ta không cần resize ở bước này. Tips: nếu bạn dùng stock khác thì nếu hình lâu đài của bạn quá to, bạn chọn Ctrl + T và kéo+ giữ nút shift để giảm size bức hình xuống. Ngược lại nếu tấm hình lâu đài của bạn nhỏ quá thì Bạn chọn Image > Image Size để giảm kích thước bức hình lại.

B2:
Bạn chọn menu Image > Canvas Size. Bây giờ chiều cao bức hình là 1920 pixels. Mình sẽ chuyển nó thành 5000 để đủ chỗ trống cho cả 2 stocks.

B3:
Sau khi cắt bỏ để 2 tấm hình nhìn thật vừa ý, mình chuyển bức hình lâu đài theo hướng ngược lại bằng cách: Edit > Transform > Flip horizontal

B4:
Sau đó resize lại tấm hình lâu đài bằng cách bấm Ctrl + T

B5:

Bước này chủ yếu sử dụng công cụ Eraser của Photoshop. Bạn chọn công cụ này giống trong hình:

Mình thường sủ dựng Brush mềm và tròn để làm cho mép của những tấm hình chuyển tiếp 1 cách thật hơn.

Và bạn xóa theo khu vực đánh dấu màu hồng trong hình

B6:

Tuy nhiên hình bị dư ra 1 khúc (phần mũi tên màu xanh), mình dung crop tool để chỉnh cho bức hình nhỏ lại. Và kết quả:

B7:

Ở bước này mình dùng Marquee Tool (M) và copy khúc gần thác nước sau đó chọn Layer > Duplicate layer

sau đó kéo sang bên phải và dùng Eraser Tool với Brush mềm xóa xung quanh. Bạn cũng có thể dùng Clone Stamp để làm bước này. Và kết quả ta có được như hình trên.

B8:

Bạn đặt stock bầu trời lên Layer trên cùng theo thứ tự như hình bên.

Sau đó chuyển tấm hình ngược lại bằng cách Flip Horizontal và resize bức hình lại bằng cách bấm Ctrl + T

B9:
Vào Layer > Layer Style > Blending Options … chỉnh theo thông số sau:

B10:

Sau đó di chuyển bức hình bầu trời xuống và dùng brush mềm xóa góc cạnh của hình, đồng thời bấm Ctrl + U. Ta được kết quả như bên dưới:

B11:
Bước cuối cùng là cân chỉnh màu sắc lại phù hợp với ý thích mổi người. Bạn cũng có thể dùng Gradients

Tips: Ngoài ra bạn cũng có thể cân chỉnh màu bằng cách chọn Ctrl + B và Ctrl + M
Sau đó vào Layer > Layer Style > Blending Option và chọn theo thông số sau:

Kết quả:

Và cuối cùng tùy theo mỗi người mà bạn sẽ tạo ra được những kết quả khác nhau.

10 Designer bạn nên follow trên Twitter

Nguyễn Duy Nhân    @Web design     twitter

Không phải bởi vì twitter của họ đẹp mà bởi vì chất lượng các tweet của họ khá tốt và bao gồm các tutorial chất lượng mà giới design đều muốn đọc, muốn tìm hiểu. Nếu bạn yêu design thì đây là các twitter mà bạn nên follow. Chi tiết

Những hình ảnh panorama xuất sắc (phần 2)

Nguyễn Duy Nhân    @Web design     ảnh, panorama

Tiếp theo phần 1, mời các bạn chiêm ngưỡng những bức ảnh thuộc thể loại panorama.
Chi tiết

Những tấm ảnh panorama xuất sắc

Nguyễn Duy Nhân    @Web design     ảnh, panorama

Đây là những hình ảnh được đăng trên báo Vnexpress, chuyên mục Vi tính. Nói chung là ảnh này thì khỏi phải chê . Ý tưởng cũng lạ nữa chứ Chi tiết

Sử dụng font tùy ý trên website

Nguyễn Duy Nhân    @Web design     font, font chữ

Bạn nào làm trong mảng thiết kế website chắc cũng hiểu rõ một trong những khó khăn khi thiết kế website là vấn đề font chữ. Nhiều bản thiết kế rất đẹp nhưng cũng đành … vứt xó vì font chữ không thể hiển thị trên website vì trên máy người dùng (client) không có font đó. Trong bài viết này mình sẽ hướng dẫn các bạn khắc phục chuyện này để có những bản thiết kế đẹp nhất. Chi tiết

Giao diện trang chủ đẹp cho bạn

Nguyễn Duy Nhân    @Web design     giao diện

Tình cờ dạo trên mạng thấy cái trang chủ đơn giản nhưng cũng đẹp nên save lại rồi đem về đây gửi tặng mọi người. Giao diện này thích hợp cho các site có nhiều danh mục nội dung khác nhau và không thể tích hợp thành một portal chung. Chi tiết

Kích thước banner – logo theo chuẩn quốc tế

Nguyễn Duy Nhân    @Web design     banner, kích thước tiêu chuẩn, logo, tiêu chuẩn

Khi vận hành website có rất nhiều trường hợp bạn phải bổ sung các banner, logo của đối tác, khách hàng hoặc một vài dịch vụ ngay trên chính website của mình để thu hút khách truy cập. Tiếc là ở VN hiện nay chưa có một chuẩn nào được các designer công nhận nên hầu như mạnh ai nấy lầm, làm thế nào để thật bắt mắt là ok (nhưng đôi lúc gây phiền hà và khó chịu cho người dùng). Vì vậy, bạn nên bỏ chút thời gian nghiên cứu qua bản tiêu chuẩn banner, logo dưới đây để thiết kế được những sản phẩm vừa ý nhất mà không gây trở ngại cho người dùng, đồng thời cũng dễ trao đổi hơn với các website khác. Chi tiết

Tạo con dấu đỏ bằng photoshop

Nguyễn Duy Nhân    @Web design     con dấu, photoshop, đồ họa

Hôm nay khai trương cái box đồ họa, cũng là đang rãnh hơi chưa có làm gì nên viết cái tutorial này tặng bà con, cũng là đáp ứng nhu cầu của thằng em ngoài HN. Mong rằng cái này thỏa mãi được cái tính thích tự khẳng định mình của mọi người. Nói thật mình không giỏi photoshop lắm nên làm đơn giản nhất có thể để mọi người cùng học tập lẫn nhau là chính. Chi tiết

Ý tưởng thiết kế website: 40 địa chỉ hay cho bạn

Nguyễn Duy Nhân    @Web design     HTML, template, thiet ke web

Đôi lúc, bạn bị “bí” ý tưởng thiết kế website, thì các địa chỉ dưới đây sẽ là “vị cứu tinh” của bạn. Nhớ là chỉ tìm kiếm ý tưởng hay thôi nhá Copy không phải là lựa chọn tốt… Chi tiết

Cách sử dụng thẻ Marquee trong HTML

Nguyễn Duy Nhân    @Web design    

Để làm chữ chạy bạn dùng đến thẻ cặp thẻ <marquee>
Thẻ sẽ làm chạy hầu hết các đối tượng trong thẻ như: Text, ảnh, các định dạng khác chứa trong nó có thể chạy trên màn hình.

Chi tiết

Giao diện cho người dùng trong thiết kế web

Nguyễn Duy Nhân    @Web design    

Đã từ lâu tôi muốn viết về chủ đề này, vì đây là vấn đề mà các web designer và các developer của Việt Nam thường ít chú ý, trong khi ở các công ty dịch vụ web của nước ngoài thường có riêng một bộ phận nghiên cứu về khía cạnh này. Phải hiểu cách người dùng sử dụng web hay truy cập và tương tác với nó như thế nào thì mới có các thiết kế vừa đẹp, vừa sáng tạo mà vẫn thân thiện với người dùng. Chi tiết

Ấn tượng của website nằm trong 1/20 giây đầu tiên

Nguyễn Duy Nhân    @Web design    

Người sử dụng Internet chỉ mất 1/20 giây để quyết định họ có thích giao diện trang web đó hay không. “Sự hấp dẫn hình ảnh có thể được đánh giá chỉ trong 50 phần nghìn giây. Điều này cho thấy người thiết kế chỉ có khoảng 50 phần nghìn giây để tạo nên một ấn tượng tốt”, các nhà nghiên cứu Canada tuyên bố.

Chi tiết