Chuyên mục lưu trữ: Học thiết kế

Học thiết kế web layout trên photoshop, illustrator

Photoshop cơ bản – bài 3: Layer – sử dụng layer panel

Trong bài học trước, chúng ta đã có cái nhìn khái quát về Layer, nó giúp cho công việc biên soạn và xử lý ảnh dễ dàng hơn như thế nào trong Photoshop. Trước khi học những bài nâng cao về Layer, chúng ta nên tìm hiểu thêm các lệnh của Layer panel.

Layer panel (hay được gọi là Layer pallete trong các phiên bản trước của Photoshop) là nơi thực hiện tất cả những công việc liên quan đến Layer, từ thêm hay xóa Layer cho đến tạo các mặt nạ (mask), hiệu chỉnh Layer, thay đổi các chế độ nhuộm màu (blend mode), tắt / mở Layer, đổi tên Layer, tạo nhóm Layer … nói tóm lại là tất cả mọi thứ liên quan đến Layer. Chính vì mức độ thông dụng của nó, vì thế Photoshop luôn ưu tiên mở bảng Layer panel mỗi khi chúng ta khởi động Photoshop.

Mặc định, bạn sẽ dễ dàng tìm thấy Layer panel nằm ở vị trí góc phải cuối màn hình bất kể bạn đang sử dụng phiên bản nào của Photoshop.

layer-panel01

Nhưng nếu vì một lý do nào đó, Layer panel không hiển thị trên màn hình, bạn có thể bật nó lên từ thanh menu ngang, chọn Window > Layer (bạn có thể sử dụng phím tắt f7 để bật tắt Layer panel). Dấu “check” có nghĩa là Layer panel đã hiển thị trên khung cửa sổ của Photoshop

layer06
Bây giờ giả sử tôi sẽ mở một ảnh bất kỳ trong Photoshop

layer-panel02

Nếu nhìn vào Layer panel, bạn sẽ thấy một hình ảnh thu nhỏ của ảnh vừa mở. Đây chính là thumbnail của Layer

Tên Tab

Làm thế nào ta biết đâu là Layer panel? Đơn giản là bạn hãy nhìn vào tên tab (tab name) ở phía tên panel

layer-panel03
Bạn cũng chú ý rằng bên cạnh tab tên “Layers” chúng ta còn nhìn thấy 2 tab khác đó là “Channels” và “Path” với màu tối hơn. Hai tab này được nhóm lại trong một cùng panel với Layer. Thật tế còn có rất nhiều panel khác, để hiển thị tất cả các panel trên cửa sổ Photoshop là một vấn đề nan giải, vì vậy Adobe nhóm chúng lại với nhau để tiết kiệm khoảng không gian cửa sổ làm việc. Hiểu được việc này, bạn không cần bận tâm đến 2 tab còn lại, vì chúng có các chức năng mà chúng ta sẽ học ở bài khác. Còn bây giờ bạn chỉ cần chú ý đến Layer panel, bảng đang hiện hành với màu sáng hơn như hình minh họa.

Các hàng Layer

Khi bạn mở một tập tin ảnh trong Photoshop, lập tức ảnh đó mặc định nằm ở một Layer. Mỗi Layer được hiển thị trong Layer panel là một hàng. Mỗi hàng sẽ có những thông tin về Layer đó. Vì chúng ta chỉ có một Layer như ví dụ, nên trong Layer panel cũng chỉ có một hàng, nếu bạn thêm Layer, chúng ta sẽ thấy nhiều hàng được thêm vào trong Layer panel.

layer-panel04

Tên Layer

Ở mặc định, Photoshop đặt một ảnh mới trong Layer có tên là “Background” (ảnh nền), nó có tên là Background bởi vì đơn giản nó là ảnh nền của tập tin. Bạn có thể thấy tên Layer nằm bên cạnh ảnh thu nhỏ (thumbnail). Thật ra Background Layer là một layer khá đặc biệt so với các Layer khác, vì vậy chúng ta sẽ tìm hiểu về nó chi tiết hơn ở bài học khác kế tiếp.

Hình ảnh xem trước (preview thumbnail)

Như bạn cũng nhận thấy, bên trái tên Layer là một hình ảnh thu nhỏ của tập tin ảnh bạn vừa mở, nó hiển thị chính xác những gì có trong Layer đó với hình ảnh thu nhỏ (Preview thumbnail). Vì tập tin ví dụ của chúng ta chỉ có 1 Layer, nên bạn không thấy nó có gì đặc biệt, tuy nhiên sau này làm việc với tập tin có nhiều Layer bạn sẽ thấy nó có ích như thế nào trong việc giúp ta xác định Layer muốn chọn nhanh chóng.

Thêm Layer

Để thêm một Layer mới, bạn có thể click vào icon ở dưới Layer panel như hình minh họa.

layer-panel05

Một Layer mới xuất hiện ngay trên Background Layer. Photoshop cũng tự động đặt tên Layer này là “Layer 1”. Bạn hãy chú ý, bây giờ chúng ta đã có 2 Layer nằm trên 2 hàng trong Layer panel.

layer-panel06
Nếu bạn nhìn vào thumbnail của Layer 1 vừa mới tạo bạn sẽ thấy nó là một ảnh với các mẫu hoa văn carô xám-trắng (check patern). Các hoa văn này là cách Photoshop báo cho bạn biết đó là phần trong suốt (transparency), bởi vì nó chưa có gì trong đó, nên đây là một layer rỗng.

layer-panel07

Nếu muốn có thêm một Layer nữa, đơn giản bạn hãy click vào icon “Create a new layer” như đã làm ở trên.

layer-panel08

Di chuyển Layer

Bạn có thể di chuyển vị trí các hàng Layer lên bên trên hoặc xuống dưới tùy ý bằng cách click trong khi vẫn nhấn chuột trái (drag), sau đó kéo nó xuống vị trí hàng mà bạn muốn, thả chuột trái đang nhấn ra, Layer sẽ được kéo đến vị trí bạn muốn.

layer-panel09

Xóa Layer

Để xóa một Layer, dơn giản bạn chỉ cần click lên hàng Layer đó vào nắm kéo nó xuống icon “Trash Bin” ở cuối Layer panel và thả ra. Hình minh họa xóa Layer 1

layer-panel10
Tương tự, bạn hãy xóa Layer 2 và cuối cùng ta còn lại duy nhất “Background” layer như trong hình

layer-panel04

Nhân bản Layer

Bạn đã biết sử dụng icon “New Layer” để tạo ra một Layer mới, nó còn có một chức năng khác là nhân bản (copy) một Layer khác bằng cách nhấn và giữ chuột trái, sau đó kéo và thả (drag) Layer vào icon này.

layer-panel11

Khi thả chuột ra, một Layer mới dược nhân bản nằm bên trên Layer gốc. Photoshop sẽ tự đặt tên Layer mới được nhân bản bằng cách thêm chữ “copy” vào sau tên Layer gốc. Trong trường hợp này, Layer mới sẽ có tên là “Background copy”. Chú ý, bạn nhận thấy Layer mới nhân bản sẽ được là Layer hiện hành ngay khi được tạo ra.

layer-panel11

layer-panel12g

Bây giờ tôi thử áp dụng Filter > Motion Blur để làm cho Layer mới nhân bản có sự khác biệt. Bạn sẽ nhận thấy sau khi chỉnh sửa, ảnh nhân bản và thumbnail đều thay đổi, trong khi đó ảnh gốc nằm ở “Background” layer vẫn giữ nguyên gốc.

layer-panel13

Giấu Layer

Bởi vì Layer nhân bản nằm trên, nên nó sẽ che hết Layer gốc nằm bên dưới, nếu bạn muốn nhìn thấy “Background” Layer bạn phải giấu nó đi bằng cách click vào icon con mắt như hình minh họa.

layer-panel14

Bây giờ bạn sẽ lại thấy ảnh gốc ở “Background” layer trở lại, sau khi ảnh ở “Background copy” layer được giấu đi, muốn mở lại Layer trên, bạn hãy click vào vị trí icon đang trống một lần nữa, “Background copy” layer sẽ hiển thị lại.

layer-panel16

Đổi tên Layer

Như bạn đã biết, Photoshop tự động dặt tên mỗi khi chúng ta tạo ra Layer mới. Với những cái tên như “Layer 1”, “Layer 2” hay “Background copy” rất chung chung sẽ khó mà giúp chúng ta nhận diện được chính xác khi phải làm việc với một tập tin có vài chục đến thậm chí cả trăm Layer khác nhau. May mắn thay, chúng ta có thể đổi tên Layer khá dễ dàng bằng cách double-click (nhấp chuột 2 lần) lên tên của Layer, Lúc này tên Layer sẽ hiện trong ô trắng với cón trỏ nhấp nháy để bạn gõ tên mới vào. Sau khi hoàn tất bạn có thể nhấn phím Enter (Win) hoặc Return (Mac) để hoàn tất việc thay đổi tên.

Trong trường hợp này tôi đổi tên “Background copy” layer thành “Blur” layer

layer-panel17

Thêm Layer Mask (mặt nạ)

Layer Mask là một chức năng thiết yếu trong Photoshop. Chúng ta sẽ còn tìm hiểu về Layer Mask trong một bài học khác chi tiết hơn. Ở phần này tôi chỉ sẽ nói cách bạn thêm Layer Mask như thế nào. Đầu tiên bạn chọn hàng của Layer, sau đó click vào icon Layer Mask ở cuối Layer Panel như trên hình.

layer-panel18

Bạn nhận thấy thumbnail của Layer Mask xuất hiện bên phải thumbnail của ảnh, bạn hãy click vào icon Layer Mask, khi được chọn Layer Mask sẽ có một viền đen mỏng bao quanh.

layer-panel21

Tiếp đến bạn hãy chọn công cụ Brush ở thanh công cụ (Tool box).

layer-panel19

Và chọn màu Foreground là màu đen

layer-panel20

Bạn sẽ muốn chọn nét cọ to hơn một chút bằng cách tăng kích cỡ Brush size ở hộp thoại xuất hiên ở góc trái màn hình khi click vào icon Brush preset. Ở bài này tôi sử dụng Brush size là 180

layer-panel22

Bạn nhấn chuột rê bất kỳ lên vùng nào của bức ảnh của “Blur” layer, lập tức phần được tô màu đen trên bức ảnh sẽ trong suốt, lộ phần hình ảnh của “Background” layer nằm bên dưới.

Mũi tên Đỏ: Layer Mask được tô với Brush Mũi tên Xanh: phần ảnh của "Background" layer được lộ ra nhờ vùng màu đen trên Layer Mask Mũi tên Hồng: Phần ảnh "Blur" Layer chính là vùng màu trắng trên Layer Mask

Mũi tên Đỏ: Layer Mask được tô với Brush
Mũi tên Xanh: phần ảnh của “Background” layer được lộ ra nhờ vùng màu đen trên Layer Mask
Mũi tên Hồng: Phần ảnh “Blur” Layer chính là vùng màu trắng trên Layer Mask

 

Đến đây nếu bạn chưa hiểu lắm về Layer Mask thì cũng đừng lo lắng quá, chúng ta sẽ trở lại tìm hiểu Layer Mask ở một bài học khác chi tiết hơn.

Thêm Fill (tô màu)hay Adjudment Layer (hiệu chỉnh)

Ngay bên phải icon Layer Mask ở cuối Layer panel chính là New Fill hay Adjustment Layer icon. Đây là icon dùng để tạo một sự hiệu chỉnh màu sắc, tương phản, sắc độ …. lên Layer xác định mà vẫn giữ nguyên ảnh gốc của Layer đó.

layer-panel24

Bạn hãy chọn mục Hue/Saturation trên danh sách.

layer-panel25

Khi hộp panel Hue/Saturation xuất hiện, bạn hãy thử điều chỉnh các thanh điều chỉnh như Hue, Saturation. Lúc này bạn sẽ nhận thấy cả hai Layer bên dưới Adjustment Layer đều bị ảnh hưởng bởi sự điều chỉnh này.

layer-panel27

Dĩ nhiên chúng ta đang học về Layer nên sẽ không tìm hiểu thêm về các chức năng cân chỉnh màu sắc, các bài học chi tiết hơn về chức năng này sẽ được mô tả chỉ tiết hơn ở các bài học khác.

Thay đổi chế độ nhuộm màu (blend mode)

Khi có các layer chồng lên nhau, chúng ta sẽ có thể áp dụng chế độ nhuộm màu như thế nào đối với các Layer với nhau. Chức năng Blend mode nằm ở góc trái của Layer panel. Ở mặc định, chế độ này thiết lập ở “Normal” (bình thường), không áp dụng Blend mode nào. Bây giờ bạn thử chọn “Color” blend mode

layer-panel29

Khi áp dụng chế độ “Color” blend mode cho “Hue/Saturation” layer, tất cả các màu sắc ở các Layer dưới sẽ chịu ảnh hưởng của sự điều chỉnh “Hue/Saturation” nhưng mức độ sáng tối của bức ảnh (Dark, Light, Shade …) sẽ được giữ nguyên. Do đó bạn sẽ thấy toàn bộ bức ảnh sáng hơn một chút ở “Color” blend mode. Chúng ta cũng sẽ tìm hiểu chi tiết hơn về Blend mode ở các bài học sau này.

Tham số độ trong suốt / mờ (opacity) và tô màu (Fill)

Chúng ta có thể kiểm soát mức độ trong suốt của từng Layer bằng tham số Opacity nằm cùng ngang vị trí với Blend mode ở đầu Layer panel. Ở mặc định Opacity có giá tri 100%, diều này có nghĩa là Layer này đặc kín và không thể nhìn được lớp Layer dưới thấp hơn. Ở ví dụ này bạn thử điều chỉnh Opacity xuống còn 35%. Lúc này bạn sẽ thấy hình gốc rõ hơn, vì sự điều chỉnh Hue/ Saturation chỉ còn phủ 35%.

layer-panel30

Bên dưới ô điều chỉnh Opacity là tham số điều chỉnh mức độ Fill, đây cũng là tham số dùng để tăng giảm độ trong suốt của Layer. Trong phần lớn các trường hợp, Opacity và Fill đều có chức năng giống nhau, nhưng chúng sẽ có sự khác biệt quan trọng nếu bạn sử dụng Layer Styles. Một lần nữa, chúng ta sẽ không nhồi nhét nhiều thứ trong một bài học, mà nên để dành những tìm hiểu này qua một bài khác chuyên sâu hơn.

Nhóm Layer (Grouping Layers)

Ở phần trên chúng ta đã học cách quản lý các Layer tốt hơn bằng cách đặt lại tên cho chúng theo cách dễ nhận dạng. Một cách khác tốt hơn nữa là nhóm các layer lại cùng nhau. Bạn có thể tạo một nhóm mới bằng cách click vào icon New Group ở sát cuối Layer panel.

layer-panel31

Nếu bạn click vào icon “New group” một Group sẽ được tạo ra. Tuy nhiên tôi sẽ không làm theo cách này, bởi vì nếu làm vậy tôi sẽ tạo ra một Group rỗng, và bạn phải di chuyển các Layer vào Group đó. Chúng ta có thể làm cách khách nhanh hơn.

Bạn hãy chọn các Layer mà bạn muốn nhóm chúng lại, trong trường hợp này là “Hue/Saturation” layer và “Blur” layer. Bạn hãy click chuột vào hàng Layer thứ nhất, sau đó nhấn phim Shift trên bàn phím để chọn Layer thứ hai. Nếu nhìn thấy cả hai Layer được chọn có màu xanh dương nhạt là bạn đã làm đúng.

Tiếp đến bạn hãy click vào icon ở góc phải trên cùng của Layer panel, và chọn “New Group from Layers” từ danh sách.

layer-panel32

Photoshop sẽ mở một hộp thoại, cho phép bạn có thể đặt tên cho Group mới và vài tham số khác. Tuy nhiên ở ví dụ này, bạn có thể click OK và chấp nhận thiết lập mặc định được đề nghị.

layer-panel34

Như vậy nhóm mới được tạo ra có tên là “Group 1” và chứa 2 layer đã chọn trước đó bên trong, để xem 2 layer này bạn click vào icon hình mũi tên để mở rộng hiển thị của Group.

layer-panel35

Chúng ta sẽ còn gặp những điều lý thú về Group trong các bài học sau.

Tạo hiệu ứng cho Layer (Layer Styles)

Icon Layer Styles cũng nằm ở cuối Layer panel. Layer Style cho phép bạn thêm các hiệu ứng như bóng đổ (Drop Shadow), Strokes (Tô viền), Glows (Phát sáng) … Click vào icon Layer Styles bạn sẽ thấy một danh sách dài các hiệu ứng.

layer-panel36

Khóa Layer

Các icon khóa Layer trong Photoshop có nhiều tính năng khóa khác nhau. Ví dụ bạn có thể chỉ cần khóa các pixel ở phần trong suốt trên Layer, hoặc chỉ khóa nội dung nằm trên Layer, hoặc chỉ khóa vị trí của Layer tránh tình trạng di chuyển do lỡ tay. 4 icon từ trái sang phải đại diện cho 4 cách khóa khác nhau:

Lock Transparent Pixels (khóa các điểm ảnh trong suốt), Lock Image Pixels (khóa các điểm ảnh nội dung), Lock Position (Khóa vị trí), và Lock All (khóa tất cả)

Khi bạn chọn bất kỳ kiểu khóa nào, Layer đó sẽ hiển thị một icon nhỏ hình ổ khóa sát bên phải hàng chứa Layer đó. “Background” layer luôn được khóa mặc định.

layer-panel37

Thay đổi thumbnail của Layer

Nếu bạn cảm thấy khó chịu do các Layer thumbnail quá lớn tạo các hàng quá to, gây mất nhiều thời gian khi cuộn xuống xem. Bạn có thể thay đổi kích thước các icon này bằng cách chọn menu icon ở góc phải Layer panel và chọn tiếp Panel Options

layer-panel38

Hôp thoại Panel Options hiển thị sẽ cho phép bạn chọn kích cỡ của thumbnail vừa ý. Bạn có thể thay đổi thumbnail size bất cứ lúc nào bạn muốn.

Đến đây chúng ta cũng kết thúc bài học tìm hiểu về Layer, bài tiếp theo chúng ta sẽ tìm hiểu chuyên sâu về sự khác biệt của Background layer mặc định của Photoshop so với các Layer thông thường.

Photoshop cơ bản – bài 2: Layer – Giới thiệu sơ lược

Layer (lớp) là một thành phần quan trọng của Photoshop. Có thể nói không có Layer, chúng ta khó có thể làm bất cứ việc gì trong Photoshop, vậy layer chính xác là thứ gì?

layers2
Bạn hãy tưởng tượng, Layer như các lớp kiếng chồng lên nhau, một bức ảnh trong Photoshop có thể có nhiều Layer như vậy, các lớp này có thể trong suốt (transparent) hoặc có độ mờ theo nhiều cấp từ 0% (trong suốt hoàn toàn) cho đến 100% (che kín hoàn toàn). Layer có tác dụng giúp người xử lý ảnh tách từng phần của ảnh để xử lý riêng theo ý đồ mà không ảnh hưởng đến các phần khác, Layer có thể là các lớp chữ, lớp hiệu ứng hoặc các lớp mặt nạ (mask – chúng ta sẽ tìm hiểu thêm về sau) ….

1 – Tại sao phải sử dụng layer

Trước khi tìm hiểu sâu hơn về Layer, chúng ta sẽ cùng thực hành xem Layer trong Photoshop thật chất là như thế nào. Bạn hãy mở chương trình Photoshop, tạo một tập tin mới bằng cách chọn File > New

file-new

Photoshop sẽ mở một hộp thoại như hình minh họa bên dưới

new-dialogue

Các thông số trong hộp thoại có thể được hiểu như sau: tập tin mới sẽ được tạo với chiều rộng (witdh): 800 px (pixel là đơn vị tính theo điểm ảnh) và chiều cao (height) là 600 px, độ phân giải (resolution) 72 dpi (dot per inches – số điểm ảnh có ở mỗi inch). Bạn hãy bấm OK để đồng ý tạo một tập tin với các thông số như trên.

Nào, bây giờ bạn đã có một trang với background (nền) có màu trắng để chuẩn bị biên soạn hình ảnh.

Tiếp đến bạn hãy chọn Rectangular Marquee Tool (dụng cụ tạo vùng chọn hình chữ nhật) từ thanh công cụ
marquee

Click vào một điểm bất kỳ trên nền tập tin mới vừa tạo, click và giữ chuột kéo (drag) từ trên xuống dưới, để tạo ra một vùng chọn (selection) như hình minh họa, bạn không cần quan tâm nhiều đến kích thước vùng chọn.
new-dialogue2

Tiếp đến, bạn hãy chọn chức năng tô màu bằng cách chọn menu Edit > Fill
fill

Sau đó bạn sẽ thấy một hộp thoại của Fill hiện ra, bạn hãy chọn “color” như hình minh họa
fill2

Click OK bạn sẽ có một ô chữ nhật được tô màu đỏ như trong hình, dĩ nhiên bạn có thể chọn bất cứ màu sắc nào bạn muốn ở bài tập này.

red-selection2

Như các bạn đã thấy, vùng chọn trong bài tập này chính là các đường gạch nối nhấp nháy, bây bạn hãy thử bỏ vùng chọn bằng cách chọn trên menu Select > Deselect

selection2

Lúc này, bạn sẽ thấy vùng chọn xung quanh hình chữ nhật màu đỏ biến mất. Rất tốt. Bây giờ bạn hãy tạo ra một vùng chọn kế tiếp chồng lên hình chữ nhật màu đỏ và tô màu bất kỳ như đã thực hành giống như phía trên.

selection3

Và kế tiếp cũng bỏ vùng chọn như đã làm với hình màu đỏ bằng cách chọn menu Select > Deselect.

Bạn có thể hài lòng với kết quả đã làm. À mà không, hình như là tôi muốn hình màu xanh lá nằm bên dưới, và hình màu đỏ nằm bên trên, vậy thì làm cách nào để sửa chữa sai lầm này đây?

selection4

Thực tế là cả hai hình chữ nhật đều nằm trên một mặt phẳng và chúng không thể đảo ngược vị trí hoặc di chuyển chúng nữa, do đó nó như một mặt phẳng của một bức tranh, bạn chỉ có thể di chuyển một phần bức ảnh chỉ bằng cách cắt chúng ra từng mảnh, nhưng như thế không phải là thứ tôi muốn, tôi chỉ muốn di chuyển hình chữ nhật màu đỏ còn nguyên vẹn lên trên hình màu xanh, vậy tôi phải làm như thế nào?

Bạn có thể thực hiện điều đó dễ dàng nếu sử dụng chức năng Layer của Photoshop ngay từ đầu, bây giờ bạn hãy thực hiện lại bài tập này một lần nữa nhưng có sử dụng Layer để xem sự khác biệt.

Bạn có thể tạo một tập tin mới bằng cách chọn File > New. Cách đơn giản hơn là ta sẽ xóa hình trên tập tin vừa làm để thực hiện lại bằng cách chọn Edit > Fill và chọn White (màu trắng) để tô màu che kín hình đã vẽ.

layer02

Kết quả bạn sẽ có một trang trắng tinh như thế này

layer04

2. Layer Panel – Bảng Layer

Trước khi tiếp tục bài tập, chúng ta tìm hiểu qua một chút về Layer Panel, Trên thanh menu, Photoshop có hẵn một mục bao gồm các lệnh dành cho Layer.

layer05

Ngoài ra bạn có thể trực tiếp quản lý các Layer trực tiếp trên Layer Panel như di chuyển các Layer lên trên hoặc xuống dưới, xóa layer, thay đổi cách hiển thị Layer … Layer Panel có thể tắt mở bằng cách chọn menu Window > Layer hoặc sử dụng phím tắt F7 trên bàn phím của bạn. Khi bạn nhìn thấy một dấu “check” ở menu Window > Layer điều này có nghĩa là Layer Panel đang được hiển thị.

layer06

Ngoài ra bạn còn có thể truy xuất trực tiếp một menu nhỏ nằm ngay trên góc phải của Layer Panel

layer07

Như vậy bạn đã tìm hiểu sơ lược về các cách mở lệnh liên quan đến Layer. Chúng ta cùng quay lại bài tập

Thực tế chúng ta có thể tạo ra một Layer nhanh nhất bằng cách sử dụng các icon trên Layer Panel như hình minh họa.

layer08

Layer mới tạo sẽ có tên là Layer 1, bạn có thể double-click (click chuột 2 lần ) lên tên Layer và sửa lại tên mới tùy thích.

layer09

Hiện tại bạn đang có 2 layer. Background (hình nền) thực chất là một Layer đặc biệt của Photoshop mà chúng ta sẽ tìm hiểu trong một bài học khác. Bây giờ bạn hãy chọn Layer 1 là Layer hiện hành bằng cách click lên Layer. Layer đang được chọn sẽ có màu xanh dương. Bạn hãy lập lại các bước đã học ở trên để tạo vùng chọn hình chữ nhật, đồng thời tô màu đỏ như đã làm trước đó.

layer10

Tiếp đến bạn tạo thêm một Layer mới nữa có tên là Layer 2
layer11

Và chọn Layer 2 là hiện hành, sau đó cũng tạo vùng chọn chồng lên hình màu đỏ và tô một màu khác tùy ý.

layer12

Nếu bạn nhìn vào Layer Panel bạn sẽ thấy rõ ràng 2 hình chữ nhật ta vẽ nằm trên 2 layer khác biệt. Vào lúc này bạn có thể di chuyển hình chữ nhật màu đỏ nằm trên chữ nhật màu xanh bằng cách click và chọn Layer 1 ở Layer Panel, kéo thả nó nằm trên Layer 2. Bạn sẽ thấy chúng sẽ hoán đổi vị trí trên dưới tùy thuộc vào vị trí Layer chứa chúng.

layer13

Đến đây chắc bạn cũng có thể hiểu Layer có lợi ích như thế nào khi biên soạn ảnh. Ở các hình ảnh cần được biên soạn hoặc chỉnh sửa phức tạp hơn, Layer là một chức năng không thể thiếu. Ví dụ như các nhiếp ảnh gia khi cần chỉnh sửa hình ảnh các người mẫu, họ có thể tạo vùng chọn riêng cho đôi mắt, áo, quần … và xếp thành từng Layer riêng biệt chồng lên nhau, sau đó điều chỉnh màu sắc, độ sắc nét …  từng Layer một mà không làm ảnh hưởng đến các phần khác trong bức ảnh.

Ở bài học sau chúng ta sẽ tìm hiểu sâu hơn về Layer Panel nhé

 

Kiến thức cơ bản về nghệ thuật sắp chữ – Typography

Typography là bộ phận trọng tâm của thiết kế. Nó mang lại sự hiểu biết về di sản ẩn chứa trong nghề nghiệp của chúng ta. Nó là một phương cách chủ yếu dể truyền đạt thông tin đến mọi người trong xã hội . Hãy hình dung một website, một tạp chí hay ngay cả trên truyền hình sẽ như thế nào nếu không có chữ. Typography là thứ mang đến sự cuốn hút và tạo những ấn tượng sâu sắc cho người xem. Nếu nó là điều tương đối mới đối với bạn, hoặc có lẽ là thứ bạn muốn tìm hiểu hơn, thì đây là lúc bạn có thể bắt đầu cuộc hành trình.

Typography là gì?

Theo cách nhìn đơn giản nhất, đó là sự sắp đặt chữ và kiểu chữ. Nhưng không chỉ có thế, typography sẽ còn rất nhiều điều cần khám phá tùy theo vấn đề mà bạn quan tâm.

Đối với tôi, typography sử dụng trong thiết kế là nguồn cội của chủ đề tổng thể, nhịp điệu và thông điệp mà bạn muốn gởi. Nó kết hợp với bố cục, hệ thống lưới và màu sắc chọn lựa để tạo thành một thiết kế hoàn chỉnh.

Sự chọn lựa của bạn là kiểu chữ, kỹ thuật của bạn là tạo ra sự thiết lập các ký tự, nhịp điệu và kiểu dáng. Nó không chỉ giúp người xem dễ đọc mà còn giúp họ gắn kết với chủ đề thiết kế.

Một minh họa đơn giản về sức ảnh hưởng của typography , bạn hãy nhìn vào các đoạn chữ có cùng một nội dung, nhưng được sử dụng các kiểu chữ khác nhau. Bạn hãy xem typography có thể định nghĩa và thay đổi thông điệp đó như thế nào:

typeface exmaple

Ở cấp độ tương tác với chủ đề thiết kế, typography là công cụ hữu hiệu nhất có trong tay nhà thiết kế.
Tiếp theo chúng ta sẽ tìm hiểu qua một vài thuật ngữ và khái niệm cơ bản của typography.

Lines – Các đường gióng

Có ít nhất 5 loại đường gióng mà các ký tự cần so hàng. Đây là các đường gióng ngang (horizontal guide lines) cho các chữ in hoa (capital letters), phần đầu chữ (ascenders), chữ thường (lowercase) và phần đuôi chữ (descenders).
leading

  • Baseline (đường cơ sở) đây là đường gióng phổ biến nhất, nó chính là đường cơ sở mà các chữ nằm trên đó.
  • Cap height (hay cap line): Đây là đường gióng ngang qua đỉnh các chữ in.
  • X-height (or midline): Đây là đường gióng biểu thị chiều cao của chữ thường (ngoại trừ các ký tự có phần đầu chữ (ascenders) và phần đuôi chữ (descenders) như h,k,p,y ..). Nó còn được biết như dường gióng ngang đỉnh và xác định chiều cao của chữ x.
  • Descender height (hay beardline): Là đường gióng ngang phần bên dưới cuốu cùng của các chữ (như chữ p hay y)

_Header
Các thuật ngữ phổ biến của cấu trúc chữ Nguồn: fontshop.com

Leading – Dòng

Leading là một yếu tố có sức ảnh hưởng mạnh mẽ. Nó quyết định khả năng đọc của các đoạn văn bản.

Khi thông số leading nhỏ, các dòng chữ sẽ gần lại với nhau, khiến các khối văn bản trông có vẻ gọn gàng hơn. Nếu sử dụng leading quá nhỏ, bạn sẽ làm các dòng chữ chạm nhau ở phần trên (đầu chữ) và phần dưới của chữ (râu chữ) , điều này gây ảnh hưởng xấu đến khả năng đọc. Tuy nhiên, ở góc độ  trực quan, sử dụng leading nhỏ sẽ giúp tăng tốc độ đọc ở người xem, tuy tạo cảm giác chật chội và chứng khó chịu không gian chật hẹp, nhưng đó cũng có thể là cách mà bạn muốn diễn đạt.

Tăng thông số leading, sẽ làm giảm nhịp điệu chữ, chúng ta có thể thực hiện điều này băng cách tăng các khoảng trắng. Nó sẽ giúp trình bày các đoạn văn bản trông thoáng hơn. Nhưng nếu tăng số leading quá lớn, nó sẽ gây tiêu cực đến tính liên tục, bởi vì mắt luôn phải dõi theo các dòng chữ quá xa nhau.

Hãy quan sát các ví dụ bên dưới. Tất cả đều sử dụng cùng một kiểu chữ. Tuy nhiên chúng sử dụng các thông số leading khác nhau.

leading example

  • Ví dụ 1: thông số leading dược thiết lập ớ giá trị âm (nhỏ hơn kích cỡ chữ), bạn cũng thấy các chữ chạm nhau ở phần đầu chữ (ascenders) và phần dưới đuôi chữ (descenders), điều này ảnh hưởng đến khả năng đọc và tính thẩm mỹ.
  • Ví dụ 2: Đây là thông số chuẩn, thường được khuyến nghị sử dụng: 120% so với kích cỡ chữ. Điều này có nghĩa là nếu bạn sử dụng kích cỡ chữ là 10pt, thì leading sẽ là 12pt
  • Ví dụ 3: thông số là 200% so với kích cỡ chữ. Như bạn cũng thấy, nó phá nhịp điệu dòng chữ và và khả năng đọc chữ lưu loát.

Tracking – khoảng cách chữ

Tracking (hay còn gọi là letter-spacing) là khoảng cách của các nhóm chữ  (Trong CSS đó là thuộc tính letter-spacing)

Web

 

Tracking có hai trạng thái để mô tả là thoáng (loose) hay chặt (tight). Loose tracking là trạng thái khi các nhóm chữ cách nhau với khoảng cách lớn. Tight tracking là khi các nhóm chữ có khoảng cách gần nhau.

Quy tắc của tracking tương tự như leading, tất cả những biểu hiện thực tiễn tốt nhất đó vẫn là khả năng đọc.

Một câu càng dài thì khoảng cách chữ cần phải thoáng. Quy luật này không cứng ngắc. Nó còn tùy thuộc vào kiểu chữ, màu nền, số cột chữ và các yếu tố xung quanh trong thiết kế, cũng ảnh hưởng đến khả năng đọc của đoạn văn bản. Trước khi thiết lập các thông số cho một doạn văn bản, bạn cần phải có cái nhìn tổng thể.

Kerning – khoảng cách giữa các chữ

Kerning là thông số khoảng cách giữa hai chữ.

leading

Chắc hẳn bạn sẽ bối rối khi phân biệt giữa trackingkerning. Tracking là thiết lập toàn cục ảnh hưởng đến khoảng cách tất cả các chữ, trong khi đó kerning chỉ ảnh hưởng cục bộ, đó là khoảng cách giữa hai chữ. Một số kết hợp hai chữ với nhau cần một thông số kerning lớn hơn các loại khác để tránh chạm vào nhau. (thí dụ như cặp chữ KX so với ll).

Một điều chắc chắn rằng, nếu cùng một chữ được đặt cạnh nhau, chúng sẽ tạo ra một khoảng không gian tối thiểu. Ví dụ chữ l của kiểu chữ Helvetica là hình chữ nhật, nếu đặt cạnh nhau như lllll thì khoảng cách giữa các chữ đều bằng nhau.

Bây giờ chúng ta hãy xem xét chữ in W, khoảng không nó chiếm được định nghĩa là khoảng cách dưới chân chữ, nơi đường chéo cuối cùng kết thúc. Nếu bạn đã hiểu điều này, khi xếp chữ cạnh nó, bạn cần phải lưu ý sự khác biệt này với các chữ còn lại.

Ví dụ 1: 5 chữ l đặt cạnh nhau có khoảng cách giữa chúng bằng nhau, khác với khoảng cách chữ "W" khi đặt cạnh chữ "e"
Ví dụ 1: 5 chữ l đặt cạnh nhau có khoảng cách giữa chúng bằng nhau, khác với khoảng cách chữ “W” khi đặt cạnh chữ “e”

Kerning là nghệ thuật điều chỉnh khoảng cách giữa các chữ làm thế nào để mắt có thể lướt đọc dễ dàng các đoạn văn bản mà không bị phân tâm bởi sự không nhất quán. Bạn nên nhớ rằng: khi typography được thiết lập tốt thì không bao giờ gây ra sự phân tâm khi đọc.

Alignment – so các hàng chữ

Tùy theo cách bạn so các hàng chữ như thế nào thì chúng có thể tác động đến người đọc và cảm nhận của họ như thế đó. Quyết định so các hàng chữ nên gắn kết với chủ đề thiết kế mà bạn đang lên ý tưởng, và dĩ nhiên chúng phải thỏa mãn các yếu tố dễ đọc và rõ ràng.

So hàng trái (Flush Left, Ragged Right hay Left Aligment)

So hàng bên trái các đoạn văn bản là một bổ thể trong cách đọc tự nhiên của văn hóa phương Tây. Nếu thực hiện đúng cách, nó là một trong những yếu tố giúp tăng khả năng đọc của đoạn văn bản.

Bạn phải chú ý phần bên phải của đoạn văn bản, Điều quan trọng là phải đảm bảo tốt sự cân bằng của dòng chữ, phải chắc rằng chúng không quá đều nhau, nhưng cũng không quá tách biệt

So hàng phải (Flush Right, Ragged Left hay Right Aligment)

Nếu đọc chữ từ trái sang phải, việc so hàng bên phải sẽ gây trở ngại dòng đọc tự nhiên. Sử dụng nó trong trường hợp bạn muốn đoạn văn bản này khác biệt với tất cả phần văn bản còn lại để làm nổi bật chúng.

Chú ý các dấu chấm câu bên phải có thể phá vỡ kiểu so hàng này

So hàng đều hai bên – Justified

So hàng đều cả hai bên trái và phải một đoạn văn bản, sẽ tạo cho khối chữ trông gọn gàng bởi vì nó được gói trong một khối hộp. So hàng kiểu này có thể gây khó đọc ở góc độ trực quan, bởi vì cách ngắt các dòng chữ. Mặt khác, nó có thể tạo ra các khoảng trắng giữa các chữ khi cố gắng cân bằng khối văn bản cả ở hai bên trái và phải.

Cẩn thận sự lạm dụng những dấu gạch nối (hyphenation) , ở một số chương trình dấu gạch nối sẽ tự động được đưa vào để giữ cho đoạn chữ được justified. Ngoài ra, một vài dòng sẽ có quá nhiều khoảng trắng, bạn có thể phải ngắt dòng để điều chỉnh nếu cần thiết.

So hàng trung tâm- Centered

Bạn nên thận trọng khi sử dụng so hàng trung tâm, không có gì tồi tệ hơn khi so hàng trung tâm một cách đơn điệu. Chúng không có điểm gì để chia sẽ tại nơi bắt đầu và kết thúc các dòng,vì vậy rất khó đọc.

So hàng trung tâm chỉ thích hợp cho các đoạn văn bản có từ hai đến ba dòng.

Nếu thực hiện đúng cách, kiểu so hàng trung tâm sẽ mang lại vẻ bề ngoài thanh lịch và sang trọng. Phải chắc chắn rằng khoảng không gian đặt khối chữ phải đủ rộng để bạn có thể ngắt dòng một cách hợp lý và tạo sự tương phản ngắn, dài giữa các dòng với nhau, mang lại sự mời gọi cho dòng chữ.

08_alignment

 

Typography trong Photoshop và Illustrator

Các phần mềm đồ họa như PhotoshopIllustrator có các chứa năng thiết lập sắp xếp chữ tuyệt vời. Những khái niệm chúng ta đã thảo luận ở trên đều có sẵn trong cả hai phần mềm này.

Hai bảng chức năng có thể mở ở menu haracter Panel (Window > Character) và Paragraph Panel (Window > Paragraph).

09_ps_ai_panels

 

Một vài thủ thuật typography

Chia cấp bậc tầm quan trọng của thông tin

Khi bạn lên một bản kế hoạch thiết kế, điều quan trọng là bạn phải xác định cấu trúc và cấp bậc thông tin. Các tiêu đề, chủ đề sẽ có được tô đậm và lớn như thế nào? Các phụ đề, nội dung thân bài và chữ chú thích hình ảnh sẽ được định dạng ra sao?

Bạn cũng nên xem xét việc sử dụng các kiểu chữ khác nhau, nó có thể sẽ giúp bạn tạo ra sự khác biệt giữa các đoạn chữ ở cấp độ khác nhau. Nhiều ấn phẩm thành công được kết hợp nhiều kiểu chữ khác nhau để tạo ra kiểu dàn trang phong cách cổ điển và cả đương đại.

Tạo ra một hệ thống phân cấp hợp lý trong thiết kế sẽ giúp nó dễ đọc.

Chọn kiểu chữ gắn kết với chủ đề

Hãy suy nghĩ về các chủ đề thiết kế của bạn trong khi chọn kiểu chữ, nó sẽ giúp bạn đưa ra quyết định. Đây là công việc có thể mất thời gian nhưng thú vị. Sau khi lên danh sách các kiểu chữ thích hợp, bạn hãy đánh giá những kiểu nào không hợp với chủ đề của bạn.

Làm quen với công việc sắp xếp chữ

Khi làm một công việc nào đó càng thường xuyên, bạn chắc chắn sẽ ngày càng đạt kết quả tốt hơn. Điều đó cũng đúng trong trường hợp này, bạn nên thực hành nhiều với typography hết mức nếu có điều kiện. Hãy tạo ra niềm đam mê trong công việc này.

Hãy tham khảo các sản phẩm của các nhà thiết kế danh tiếng, học hỏi cách họ áp dụng typography trong công việc tuyệt vời của họ. Ghi chép tên các kiểu chữ mà bạn cảm thấy bị lôi cuốn và làm thế nào để đưa nó vào chính công việc của bạn

Làm quen với nghệ thuật và khoa học của công việc sắp xếp chữ, không có gì mang đến sự tự tin trong quyết dịnh của bạn hơn kiến thức. Việc thông qua quyết định của mình một cách tự tin và rõ ràng cùng với kiến thức đầy đủ về nghề nghiệp là rất quan trọng.

Sử dụng cách tự đánh giá

Khi thảo luận với tôi các quy tắc bên trên có phần cứng ngắc, sau khi đọc bạn có thể sử dụng cách tự mình đánh giá tốt hơn. Thiết lập chữ là một hình thức nghệ thuật cũng như khoa học.

Khi nói về các quy tắc của typography, diều quan trọng là bạn phải nhận ra sự khác biệt của công việc. Một trang đôi, một trang web, một danh thiếp, một tiêu dề thư đều có mục tiêu và sự cân nhắc riêng của chính nó.

Tất cả những điều trên, cũng thật sự là những vấn đề của công việc thiết kế.

Typography ở khắp mọi nơi

Chữ là một bộ phận của ngành thiết kế, nó xuất hiện khắp nơi xung quanh chúng ta. Bản chỉ đường, bìa tạp chí, poster, quảng cáo của TV, đoạn giới thiệu phim … bạn chẳng cần nhìn đâu xa khi muốn biết typography.

Khi bạn quan sát chữ, hãy nghĩ xem bạn dang nhìn những gì và tại sao họ lại chọn cách đó. Chẳng bao lâu, bạn sẽ nhận ra những hình thái thiết lập chữ dù nhỏ cũng thường sẽ tạo sự khác biệt lớn giữa việc sắp xếp chữ đẹp và xấu.

Nguồn: The Basics of Typography – Christian Bailey

Photoshop cơ bản – bài 1: Giới thiệu giao diện

Chào mừng bạn dến với thế giới kỳ diệu Photoshop. Loạt bài hướng dẫn này sẽ giới thiệu với bạn những chức năng cơ bản nhất của Photoshop. Có thể bạn đang bắt đầu tìm hiểu phần mềm Photoshop để phục vụ cho công việc thiết kế web, hay thiết kế in ấn hoặc đơn giản chỉ để chỉnh sửa ảnh chụp, dù với mục đích nào, nếu là người mới bắt đầu sử dụng, bạn cũng nên bắt đầu từ loạt bài hướng dẫn cơ bản này để có khái niệm về môi trường làm việc cũng như các chức năng, công cụ của phần mềm chỉnh sửa ảnh kỹ thuật số phổ biến nhất hiện nay.

Các thành phần giao diện Photoshop

PTS6-interface

1. Bảng công cụ – Tool panel

Toolbar hay Tool panel
Toolbar hay Tool panel

Có lẽ thành phần quan trọng nhất trong giao diện photoshop dó chính là bảng công cụ, nó chứa hàng loạt các biểu tượng (icons) khác nhau của photoshop dể giúp thay đổi và tạo ra các hình ảnh. Các công cụ quan trọng bao gồm các công cụ chọn lựa (selection) giúp giới hạn khu vực cụ thể cần chỉnh sửa trên hình ảnh, các công cụ biến đổi hình ảnh như kéo, xóa, thêm và nhiều hơn nữa… Chúng ta sẽ quay lại tìm hiểu kỹ hơn ở các bài hướng dẫn sau.

2. Bảng photoshop – Photoshop panels

Photohop panels (panes)
Photohop panels (panes)

Các bảng này cũng là những điểm đáng chú ý trong giao diện của photoshop. Tất cả các loại thông tin sẽ được hiển thị trên các bảng, đôi khi sẽ khiến bạn bối rối. Những thông tin đó bao gồm thông số vị trí, kích thước ảnh, tùy chọn thay đổi cho các công cụ, lịch sử các hành động của bạn trên photoshop, đôi khi có nhiều bảng hiện lên cùng lúc, chúng sẽ bị che mất, bạn có thể vào menu Window để mở lại. Chúng ta cũng sẽ biết nhiều hơn về các bảng này ở các bài sau.

3. Menu – bảng phân nhánh chức năng

Photoshop menu
Photoshop menu

Menu là thành phần quen thuộc nhất  đối với những người mới bắt đầu sử dụng photoshop. Nó chứa các loại tham số mà đôi khi không xuất hiện trên cả thanh công cụ lẫn các bảng chức năng, người sử dụng chỉ có thể mở các tham số này từ thanh menu. Chúng ta có thể dành chút ít thời gian để tham khảo sơ qua.

  • File chứa những chức năng cơ bản nhất một phần mềm phải có và bổ sung thêm một vài thứ hữu ích như Import để đưa các hình ảnh từ máy Scan hay chức năng Save for Web dùng để lưu các hình ảnh ở định dạng được hỗ trợ dành cho web.
  • Edit là một nhánh menu cũng khá quen thuộc. Trong photoshop, Edit chứa những chức năng cơ bản để thay đổi các bức ảnh, đáng chú ý như Fill & Stroke (tô màu và đường viền), Transform (xoay, lật, kéo giản ảnh)
  • Image là một nhánh menu bao gồm các chức năng có thể tác động lên toàn bộ bức ảnh như Color Adjustments (chỉnh màu sắc), Size Adjustments (chỉnh kích thước) và một số chức năng khác có thể thay đổi toàn bộ một bức ảnh trong photoshop.
  • Layer tương tự như nhánh menu Image, nhưng nó có chức năng giới hạn sự thay đổi chỉ tác động tại một Layer (lớp). Tôi sẽ giải thích sâu hơn về Layer ở các phần sau. Ở phần này bạn chỉ hiểu đơn giản một Image (ảnh) trong photoshop được cấu tạo bởi nhiều Layer (lớp) trong suốt chồng lên nhau. Do vậy, những chức năng trong nhánh Layer chỉ sẽ có tác dụng ở một hoặc nhiều Layer được chọn khác với menu Image là chúng ảnh hưởng đến toàn bộ bức ảnh.
  • Type  là menu chứa các chức năng về thay đổi, biến đổi về hiệu ứng cho chữ và kiểu chữ.
  • Select menu bao gồm các chức năng về Selection (vùng chọn) bạn tạo ra. Vùng chọn trên ảnh mà bạn muốn thay đổi là phần khó nhất khi làm việc trong Photoshop. Ở nhánh menu này bạn có thể lưu vùng chọn, tinh chỉnh vùng chọn hoặc thêm, bớt, đảo vùng chọn. Nắm vững chức năng các vùng chọn sẽ giúp bạn tiết kiệm nhiều thời gian trong lúc làm việc với photoshop.
  • Filter (bộ lọc) menu là thứ người ta thường nhắc đến khi nói đến photoshop. Các bộ lọc có thể áp dụng lên bất kỳ phần nào của ảnh và tạo những hiệu ứng độc đáo.
  • View (Xem) menu là nơi bạn có thể thay đổi các thông số hiển thị để xem trên giao diện photoshop. Bạn có thể sử dụng chức năng tắt / mở các đường dẫn (guidelines) trên ảnh, phóng to (zoom out) thu nhỏ (zoom in) có tại nhánh menu này.
  • Window là menu cho phép bạn hiển thị hoặc giấu các bảng chức năng trong giao diện photoshop. Nếu bạn bị mất một bảng chức năng nào đó, bạn có thể mở lại tại đây.
  • Help là phần thông tin trợ giúp bằng tiếng Anh. Tuy hơi vắn tắt nhưng đôi lúc cũng hữu dụng trong một số trường hợp.

Thanh tham số – option bar

Photoshop option bar
Photoshop option bar

Nó nằm ngay dưới thanh menu, là công cụ bổ sung hữu ích khi bạn đang sử dụng các công cụ khác của photoshop. Như các bạn thấy ở hình minh họa, khi bạn sử dụng công cụ Selection (vùng chọn), thanh option sẽ hiển thị các thay đổi trong quá trình bạn sử dụng. Ở đây bạn sẽ có nhiều tham số vùng chọn khác nhau, như kiểu vùng chọn, cách chọn thậm chí tạo vùng chọn theo đúng chính xác kích thước ở đơn vị pixel. Khi bạn chọn công cụ khác, thí dụ như bạn chuyển sang chọn công cụ paintbrush (cọ vẽ) thì tham số trên thanh option cũng thay đổi tương ứng với công cụ này. Nói tóm lại, thanh option là nơi bạn phải luôn chú ý khi làm việc với công cụ của photoshop.

Một vài định nghĩa cần biết trong photoshop

  • .psd : tập tin psd là tập tin định dạng của photoshop được lưu lại mặc định. Nó chứa nhiều layer và cùng các tham số bạn đã soạn thảo trước đó. Trong nhiều trường hợp, bạn có thể chuyển đổi tập tin .psd thành các tập tin ảnh ở nhiều định dạng khác nhau.
  • Layer: Tập tin photoshop được kết hợp bởi nhiều layer (lớp), theo cách giống như từng lớp trong suốt chứa từng phần của một bức ảnh chồng lên nhau. Các layer có thể chứa ảnh, chữ hoặc các hình đồ họa vector … chúng có thể được nhóm (group) lại với nhau hoặc đổi vị trí trên dưới lẫn nhau theo ý đồ người sử dụng. Đôi khi mới sử dụng photoshop, bạn có thể lúng túng khi không chọn đúng layer để chỉnh sửa, do đó bạn lưu ý cần chọn đúng layer hiện hành bằng cách nhấp chuột vào tên layer. Trong photoshop, khi bạn thêm chữ vào, một layer mới sẽ được tạo tự động. Khi muốn ghép 2 layer lại với nhau, bạn có thể sử dụng chức năng merge down hoặc faltten image để ghép tất cả layer thành một layer duy nhất.
  • Selection (vùng chọn): Vùng chọn là khu vực chịu sự tác động bởi các công cụ và chức năng được áp dụng lên ảnh. Vùng chọn trên photoshop cũng tương tự như các bạn dánh dấu một đoạn chữ trong chương trình MS Word. Khi có một vùng chọn, bạn có thể áp dụng các công cụ như paintbrush (cọ vẽ), copy (nhân bản) hoặc crop ( cắt xén). Vùng chọn trong photoshop có các hình dáng và kích cỡ bất kỳ tùy theo bạn sử dụng công cụ selection nào.
    Vùng chọn chỉ có tác động lên layer hiện hành. Nếu vùng chọn nằm ở layer rỗng, chương trình sẽ báo lỗi. Khi gặp trường hợp này, bạn cần chú ý đến bảng layer panel và xem đã chọn đúng layer hay chưa.
  • Resolution (độ phân giải) là thuật ngữ chỉ đến số pixel trên toàn bộ một bức ảnh. Một bức ảnh High Resolution (độ phân giải cao) chứa nhiều thông tin hơn một bức ảnh Low Resolution (độ phân giải thấp). Do đó người ta thường không gặp vấn dề gì khi chuyển đổi ảnh có độ phân giải cao xuống ảnh có độ phân giải thấp, nhưng nếu làm ngược lại, bức ảnh sẽ bị nhòe hoặc không đạt chất lượng bởi vì lượng thông tin bị mất không được bù đắp đúng cách.
    Độ phân giải màn hình thường ở khoảng 72 dpi (pixel per inches), vì vậy dối với những hình ảnh tạo ra với mục đích hiển thị trên các thiết bị màn hình, 72 pdi là ổn. Đối với các ảnh dùng cho in ấn, tùy theo loại máy in bạn sử dụng, 300 dpi là độ phân giải chuẩn và 150 dpi là dộ phân giải thấp nhất có thể chấp nhận được.
  • Image size (kích thước ảnh): Độ phân giải đôi khi bị nhầm lẫn với kích thước ảnh, bởi vì kích thước ảnh cũng có đơn vị bằng pixel. Kích thước ảnh được tính bằng số pixel dọc và ngang của một bức ảnh. Để hình dung, bạn có thể mở menu Image > Image size để xem mối liên hệ giữa độ phân giải và kích thước ảnh.
  • Color mode (hệ màu): là kiểu hệ màu sắc mà ảnh đang sử dụng. CMYK và RGB là hai hệ màu phổ biến mà bạn cần biết.
    CMYK là hệ màu được sử dụng cho ngành in ấn. 4 chữ CMYK là chữ viết tắt của 4 kênh màu chính bao gồm: Cyan (xanh da trời), Magenta (đỏ sen), Yellow (vàng), và BlacK (đen).
    RGB là hệ màu gồm 3 kênh màu dành cho các ảnh hiển thị trên màn hình như web, quảng cáo trên tv …. bao gồm Red (đỏ), Green (xanh lá) và Blue (xanh dương)

Bài 2: Layer – Giới thiệu sơ lược

 

 

Học thiết kế trang web theo dạng lưới (grid): Bootstrap – p2

Hệ thống lưới của Boostrap – Bootstrap Grid System

Hệ thống lưới của Bootstrap cho phép sắp xếp tối da 12 cột theo hàng dọc trên trang.
Nếu bạn không muốn sử dụng tất cả mỗi 12 cột trên trang , bạn có thể ghép các cột lại với nhau để tạo ra các cột rộng hơn:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Hệ thống lưới Bootstrap được thiết kế để đáp ứng với nhiều loại màn hình của các thiết bị di động khác nhau ( responsive) , vì thế các cột sẽ sắp xếp tự động tùy thuộc vào kích cỡ màn hình.


Các Class của hệ thống lưới Bootstrap – Grid Classes

Bootstrap có 4 class cơ bản :

  • xs (dành cho điện thoại di động – smart phone)
  • sm (dành cho máy tính bảng – tablets)
  • md (dành cho máy tính bàn – desktops)
  • lg (dành cho máy tính bàn có màn hình lớn – larger desktops)

Các classs trên có thể kết hợp để tạo ra các layout có khả năng hiển thị linh hoạt tùy vào màn hình các loại thiết bị.

Một số quy tắc sử dụng Bootstrap Grid

  • Các hàng (row) phải nằm trong div có class .container (fixed-width : chiều ngang cố định) hay
    .container-fluid (full-width : chiều ngang đầy trang) để các cột được so hàng đúng vị trí và các padding đều nhau
  • Luôn tạo row trước khi ghép các cột lại với nhau.
  • Nội dung phải luôn được đặt trong các cột, và các cột phải được đặt trong các hàng (row)
  • Các classes như .row .col-sm-4 có thể tạo các layout lưới nhanh chóng.
  • Các khoảng cách giữa các cột có được là do padding, padding bên trái ở cột đầu tiên và padding bên phải ở cột cuối cùng bị triệt tiêu là do các cột nằm trong các hàng có class .rows
  • Các cột dọc trên trang luôn có tổng số bằng 12. Ví dụ bạn muốn có 3 cột đều nhau thì hãy tạo 3 cột với class là
    .col-sm-4

Cấu trúc cơ bản của hệ thống lưới Bootstrap

Dưới đây là cấu trúc cơ bản của hệ thống lưới Boostrap:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Đầu tiên, bạn phải tạo khung chứa (container)

<div class="container"></div>

Kế đến, bạn phải tạo một hàng

<div class="row"></div>

Sau đó, thêm số cột bạn muốn (với class theo chuẩn .col-*-*). Chú ý rằng các số của .col-*-* luôn không quá số 12 cột mỗi hàng.

Dưới đây là một số ví dụ cụ thể một số layout dạng lưới Bootstrap


Ba cột bằng đều nhau

Đây là một ví dụ của layout với 3 cột có bề ngang bằng nhau, layout này sẽ giữ nguyên 3 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp gọn thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

XEM VÍ DỤ

Hai cột không bằng đều nhau

Đây là một ví dụ của layout với 2 cột có bề ngang không bằng nhau, layout này sẽ giữ nguyên 2 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Xem ví dụ

XEM BÀI TRƯỚC XEM BÀI KẾ

Học thiết kế trang web theo dạng lưới (grid): Bootstrap – p1

Hệ thống lưới (Grid systems) là gì?

Hệ thống lưới (Grid systems) là cấu trúc bao gồm hàng loạt các hàng và cột theo quy chuẩn để tạo ra các bốc cục trang web, nói một cách đơn giản đó là khung sườn, rường cột được làm sẳn để bạn có thể lắp ghép xây dựng một ngôi nhà theo ý muốn.Có rất nhiều hệ thống lưới được các nhà thiết kế web sử dụng ở phần thiết kế front -end, một trong những hệ thống lưới phổ biến nhất đó là Bootstrap.

Giới thiệu Bootstrap

Bootstrap là một dạng khung thiết kế sẵn (framework) được cung cấp miễn phí giúp các nhà thiết kế web nhanh và dễ dàng hơn.

Bootstrap bao gồm các mẫu thiết kế  HTML và CSS được thiết lập sẵn cho kiểu chữ, biểu mẫu, các nút, bảng, thanh chuyển hướng, các tiện ích như bảng nổi trên trang (modals), trình diễn hình ảnh và nhiều plugin JavaScript tùy chọn khác.  Một trong những khả năng tuyệt vời của Bootstrap đó là cung cấp cho bạn khả năng để dễ dàng tạo ra các trang web có sẵn thiết kế đáp ứng đa màn hình (responsive web design), hỗ trợ chế độ xem ưu tiên cho thiết bị di động (mobile-first).

Responsive web design là công việc thiết kế ra các trang web có khả năng tự động điều chỉnh giao diện tùy thuộc theo kích thước màn hình của thiết bị di dộng để hiển thị chế độ xem tốt nhất.

Lịch sử ra đời của Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và cung cấp miễn phí theo dạng sản phẩm mã nguồn mở từ tháng 8 năm 2011 trên GitHub. Tháng 6 năm 2014. Bootstrap là dự án số 1 trên Github

Tại sao sử dụng Bootstrap?

Ưu điểm của Bootstrap:

  • Dễ dáng sử dụng: Bất kỳ ai có kiến thức cơ bản HTML và CSS có thể bắt đầu sử dụng Bootstrap
  • Responsive features: Khả năng đáp ứng đa màn hình của Bootstrap’s responsive CSS cho tất cả các thiết bị phổ biến hiện nay như điện thoại, máy tính bảng, máy để bàn …
  • Ưu tiên cho thiết bị di động: Ở phiên bản Bootstrap 3, thiết kế theo kiểu mobile-first – ưu tiên các thiết bị di động là một phần cốt lõi của hệ thống khung
  • Tương thích trình duyệt: Bootstrap luôn tương thích với đại đa số các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Làm thế nào để sử dụng Bootstrap?

Có hai cách để sử dụng Bootstrap cho trang web của bạn.

  • Tãi về Bootstrap từ getbootstrap.com
  • Kết nối Bootstrap từ một CDN

Tãi Bootstrap
Nếu bạn muốn tải Bootstrap về máy, hãy vào getbootstrap.com, và làm theo các hướng dẫn ở đó.

Kết nối Bootstrap từ một CDN

Nếu bạn không muốn tãi về, bạn có thể sử dụng phương pháp kết nối trực tiếp đến nguồn theo phương pháp CDN (Content Delivery Network).

MaxCDN hỗ trợ CDN Bootstrap’s CSS và JavaScript cũng như jQuery:

<!-- Latest compiled and minified CSS -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Khởi tạo trang web đầu tiên với Bootstrap

1. Thiết lập khai báo HTML5 doctype

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS đò hỏi khai báo HTML5 doctype.

Bạn phải luôn khai báo đúng HTML5 doctype ở đầu trang, cùng với các thuộc tính ngôn ngữ lang:

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/> 
  </head>
</html>

2. Bootstrap 3 ưu tiên thiết bị di động (mobile-first)

Bootstrap 3 được thiết kế ưu tiên hiển thị trên các thiết bị di động, đó là một phần cốt lõi trong hệ thống khung sườn (core framework). Để đảm bảo thiết kế hiển thị đúng trên các thiết bị, bạn phải thêm meta viewport đúng cách:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

width=device-width cho phép trang web tương thích với chiều ngang với các thiết bị di động initial-scale=1 cho phép tình trạng xem trang ở tỉ lệ 1 (1 pixel CSS tương đương 1 pixel viewport) khi chúng được tải xuống từ trình duyệt.

3. Các khung chứa (Containers) Bootstrap yêu cầu các khung bao quanh các phần tử nội dung. Có hai loại class bạn có thể chọn:

.container class dành cho phần khung chứa có chiều ngang cố định (fixed width)
.container-fluid dành cho phần khung chứa với chiều ngang tràn hết màn hình (full width)

Chú ý: đối với khung bao sử dụng một trong hai class trên không được để lồng một khung chứa khác tương tự bên trong (nested container)

4. Hai trang mẫu bootstrap

Trang web mẫu có chiều ngang cố định (fixed width)

< !DOCTYPE html><html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

Trang web mẫu có chiều ngang tràn màn hình (full width container)

< !DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

XEM BÀI KẾ

Tầm quan trọng của Khoảng trắng (White Space) trong thiết kế web

Khi thiết kế web, chúng ta thường xó xu hướng tập trung vào các yếu tố thông thường của công việc thiết kế như font chữ, màu sắc, hình ảnh. Tuy nhiên còn một yếu tố quan trọng thường không dễ nhận biết, đó là khoảng trắng hay khoảng trống (White Space) giữa các phần tử trong bản thiết kế. Thật không may khi hầu hết các nhà thiết kế web và đa số các khách hàng đều nghĩ rằng khoảng trắng là khoảng không gian trống vô nghĩa. Nói một cách khác, họ cho rằng khoảng không gian trống đó nên được lấp đầy để người xem có thể có cái gì đó để đọc, để nhấp chuột hoặc để mua hàng. Thật sự thì khoảng trắng đó phục vụ cho một mục đích khác quan trọng hơn nhiều. Nó thiết lập sắc độ của bản thiết kế và tác động đến khả năng sử dụng của trang web một cách đáng kể.

Khoảng trắng (White Space) là gì?

Về cơ bản, khoảng trắng là những ký tự rỗng, không hiển thị bất cứ thứ gì khi bạn gõ trên bàn phím, thí dụ như phím tab, space và phím trở về. Đây là những ký tự rỗng nhưng khoảng trắng không phải chỉ là như vậy.

Khoảng trắng trong thiết kế là khoảng không gian bao quanh các phần tử thiết kế giúp chúng nổi bật và tách biệt với các phần tử khác. Nó bao gồm khoảng trắng ở biên đối với các trang web có thiết kế bề ngang cố định (fixed width) và khoảng trắng bao quanh lề (margin) và vùng đệm (padding) của hình ảnh hoặc các khối văn bản (text block). Khoảng trắng cũng bao gồm khoảng cách giữa các dòng văn bản (leading) và khoảng cách giữa hai chữ (tracking hay kerning).

Một điểm đáng chú ý nữa, khoảng trắng không có nghĩa là khoảng không gian phải có màu trắng. Nếu màu nền (background) của bản thiết kế là màu đen, thì khoảng trắng là màu đen. Nói một cách đơn giản, khoảng trắng là nơi trống, không bị chiếm bởi bất kỳ thành phần thiết kế nào.

Khoảng trắng ảnh hưởng đến thiết kế như thế nào?

Có hai cách để sử dụng:

Rõ ràng

Khoảng trắng ở qui mô nhỏ (như khoảng cách dòng – leading, khoảng cách chữ – kerning hay tracking) có thể tăng hoặc làm giảm sự rõ ràng của một trang web. Nếu bạn có qua nhiều nội dung cần đặt trên một khoảng không gian hạn chế, bạn có thể cần tăng khoảng trống giữa các chữ để người xem dễ đọc. Nếu bạn để ý bản in của tờ Wall Street, tờ báo thường trình bày nhiều cột và chừa lề và các vùng đệm rất ít, bù lại họ thường họ thường tăng khoảng cách giữa các dòng chữ và giữa các chữ để giúp việc đọc thoải mái hơn.

Sắc độ

Khoảng trắng ở cấp độ vĩ mô (bao quanh các chủ thể lớn nhất trên trang web) có thể tạo sự sang trọng hoặc gây cảm giác chất lượng rẻ tiền đối với một bản thiết kế. Càng nhiều khoảng trắng càng có thể tạo một bản thiết kế có phong cách sang trọng, chất lượng cao. Nếu bạn thường xem các mẫu quảng cáo trên các tạp chí phụ nữ đắt tiền, bạn sẽ thấy hầu hết các mẫu quảng cáo có không gian thoáng, chữ nhỏ và chừa khoảng trắng rộng rãi cho hình nền. Ngược lại, những mẫu quảng cáo hay được vất vào cửa nhà bạn thường đầy ắp các khối chữ to bao quanh một mớ hình ảnh lấp đầy trang và gần như rất ít khoảng trắng.

whitespace

Luôn bắt đầu với ý tưởng sắp xếp các khoảng trắng khi bắt đầu thiết kế.

Trong bản thiết kế sắp đến, thay vì nghĩ vị trí đặt một bức ảnh hoặc chừa bao nhiêu khoảng trắng cho các khối chữ, bạn nên tự nghiệm liệu có đủ khoảng trắng ở hai bên lề và vùng đệm để truyền đạt đúng sắc độ và sự rõ ràng như ý tưởng của mình. Bạn hãy học cách bố trí lề và vùng đệm xung quanh các thành phần trên bản thiết kế. Chú ý đến các khoảng trắng giữa các dòng và các chữ (typography).

Nếu bạn là người cầu toàn, hãy tạo ra hai bản thiết kế: một với nhiều khoảng trắng để mang lại cảm giác sang trọng, lịch sự và một với ít khoảng trắng theo phong cách “thị trường”. Cùng sử dụng các thành phần thiết kế như nhau, chỉ thay đổi các khoảng trắng xung quanh chúng và hãy mang cả hai bản thiết kế cho mọi người xem và bàn luận.

Nguồn: “The Importance of White Space in Web Designs” – about.webdesign.com

Hướng dẫn cơ bản wireframing trong thiết kế web

Wireframing là gì? Bạn có thể tạm hiểu nó như là cấu trúc khung sườn, một bản sơ phác kế hoạch thiết kế web. Wireframing là một bước quan trọng trong tiến trình của bất cứ công việc liên quan thiết kế giao diện nào. Nó chủ yếu cho phép bạn xác định hệ thống thông tin bản thiết kế của bạn, giúp việc lên kế hoạch dễ dàng hơn cho việc bố cục dựa theo ý đồ bạn muốn người xem xử lý thông tin như thế nào. Nếu bạn chưa sử dụng wireframing, đây là lúc bạn nên bắt đầu …

wireframes-simple

Cũng giống như bản blueprint trong thiết kế kiến trúc, bạn cần xem nó như bản phác thảo sơ đồ đen trắng hai chiều trước khi nghĩ ra cách xây một ngôi nhà thật sự. Tương tự, ở thiết kế giao diện, bạn không thể bắt đầu tạo lớp (layer) trong photoshop, hay viết các đoạn mã, mà không biết thông tin sẽ được xử lý như thế nào.

Ở cấp sâu hơn, một wireframe rất hữu ích trong quyết định cách người xem tương tác với giao diện như thế nào.Ví dụ, wireframe có thể bao gồm các trạng thái khác nhau của các nút (button) hoặc hành vi.

wireframes-menuhover

Wireframing thật sự quan trọng bởi vì nó cho phép nhà thiết kế hoạch định layout và các tương tác của giao diện mà không bị phân tâm bởi màu sắc, sự chọn lựa kiểu chữ và ngay cả nội dung. Bạn nên giải thích với khách hàng rằng, nếu người xem không thể hình dung được họ sẽ không biết đi đâu, làm gì khi xem bản wireframe đen trắng, thì bất kể bạn có thêm màu sắc gì cũng sẽ vô ích. Một nút (button) phải được hiển thị rõ ràng cho dù nó không thật sự nổi bật hoặc được tô bởi các màu sắc rực rỡ.

Bước 1: Tìm nguồn cảm hứng

Trước khi bắt đầu bước vào chi tiết hơn nữa, bạn hãy tham khảo thực tế, ví dụ như trang I ♥ wirefames. Bạn có thể lướt qua tổng thể cũng như trực quan để tìm hiểu xem các nhà thiết kế đã tiến hành bước wireframing như thế nào.

i-heart-wireframes

Một cách khác bạn có thể sử dụng công cụ tại Wirify, một website cho phép bạn xem các website đang hoạt động ở chế độ wireframe.

wireframe-cnn

Nếu bạn chịu khó liên tục quan sát các nhà thiết kế đã áp dụng wireframe như thế nào đối với các website của họ, bạn sẽ dần hình dung ra trong đầu làm thế nào tạo wireframe cho riêng mình, nó sẽ giúp bạn hệ thống thông tin trên giao diện.

Bước 2: Thiết kế các quy trình của bạn

Thiết kế là một quy trình hệ thống và vì thế các nhà thiết kế khác nhau có cách tiếp cận wireframing và những biên dịch của nó thành hình ảnh và các đoạn mã theo nhiều cách khác nhau. Bạn phải tự tìm ra quy trình nào đã mang lại cho bạn sức mạnh và quy trình nào mà bạn cảm thấy thoải mái nhất để làm việc. Ví dụ bên dưới là một sơ đồ biểu diễn những quy trình tiêu biểu

wireframes-process
Sketch: phác thảo, Wireframe: thiết kế khung sườn, Visual: tạo hình ảnh trực quan, Code: viết mã

Ngày nay, đa số các nhà thiết kế không còn ưa chuộng các công cụ tạo ra các bản phác thảo (sketch) mà grid framework (chúng ta sẽ tìm hiểu trong một bài viết khác) mới là sự lựa chọn của họ.

Grid framework nói một cách đơn giản là hệ thống khung sườn tạo sẵn (hiểu nôm na như khung sườn của các mẫu nhà tiền chế) theo chuẩn 12 cột (12-column), 16 cột hoặc 18 cột để làm nền tảng tạo wireframe. Các hệ thống grid framework được dựng sẳn chủ yếu dựa vào CSS/HTML, nhờ thế nó sẽ giúp bạn tiết kiệm được nhiều thời gian ở giai đoạn viết mã, nhưng nó cũng đồng thời hỗ trợ các tập tin khung nền ở định dạng Photoshop, Adobe Firework, Adobe Illustrator … để giúp các nhà thiết kế tạo wireframe theo đúng chuẩn của từng grid framework cụ thể.

1140_CccGrid_Template
Một khung nền của grid framework

Website-Wireframe-by-Hand-side-side-creative
Minh họa cho cách sử dụng grid framework để tạo wireframe

Bạn có thể tham khảo một vài grid framework nổi tiếng như 960 Grid System, Boostrap, Foundation, Skeleton … bạn nên chọn một trong số framework mà bạn cảm thấy quen thuộc và dễ sử dụng nhất. Mỗi grid framework có điểm mạnh và điểm yếu khác nhau mà chúng tôi sẽ đề cập đến trong bài viết khác.

wireframes-myprocess
Minh họa tiến trình thiết kế web theo từng giai đoạn có sử dụng grid framework: Wireframe: tạo khung sườn sơ phác, HI-DEF Wireframe: Tạo khung sườn chi tiết, Visual: Tạo layout trên photoshop, Code: viết mã dựa trên grid framework và cắt photoshop layout thành HTML

Bước 3: Lựa chọn công cụ

Có rất nhiều dịch vụ và phầm mềm, thậm chí các ứng dụng web trực tuyến đưa ra các công cụ giúp các nhà thiết kế tạo sơ phác và wireframe như:

Phần mềm chuyên nghiệp:

  • balsamiq  (balsamiq.com): hỗ trợ tạo phác thảo (sketch), mẫu thử nghiệm (mock-up), balsamiq cũng cung cấp thư viện các phần tử web có thể tương tác bằng cách kéo thả
  • axure (axure.com): một trong những chương trình chuyên nghiệp để tạo phác thảo, bản mẫu  (wireframing/prototyping). Tuy nhiên phần mềm chỉ hỗ trợ cài đặt trên Window, bạn có thể dùng phần mềm Omnigraffle thay thế trên Mac.

Phần mềm trực tuyến: mockflow.com, hotgloo.com, gomockingbird.com

Như đã nói ở trên, bạn có thể chọn lựa bất cứ phần mềm nào mà bạn cảm thấy thoải mái và quen thuộc để làm việc ở giai đoạn này. Với riêng kinh nghiệm của mình, tôi khuyên bạn nên sử dụng các phần mềm quen thuộc như In Design, Corel Draw, Illustrator…

Bước 4 : thiết lập Grid

Về lý thuyết các bạn có thể tìm đọc chuyên sâu trong một số bái viết khác về grid system hay grid framework. Bạn có thể hiểu đơn giản grid là một cấu trúc được thiết kế sẵn theo dạng lưới dùng để làm nền tảng cho việc bố trí các phần tử web trên layout.

Như đã nói ở trên có một số grid framework phổ biến hiện nay như 960 Grid System, Boostrap, Foundation, Skeleton … bạn có thể tải về để làm wireframe cho thiết kế layout của mình.

Đầu tiên hãy thiết lập trang theo màn hình tiêu chuẩn 1280×900. Grid tiêu chuẩn sẽ có tối đa 1140px

New Document

Sau đó đặt mẫu grid vào trang

Adobe Illustrator CS5 (1)

Mỗi grid framework có những quy tắc định sẵn bạn phải tuân theo, nhưng nếu bạn muốn tạo layout trên grid theo thiết kế riêng của mình, bạn có thể tham khảo tại responsify.it.

Bước 5: Xác định layout với các hình hộp

Bạn có thể vẽ các hình hộp đặt theo các cột của grid. Đây là lúc bạn lên ý tưởng sắp xếp và trình bày các thông tin trên trang web làm thế nào để người xem dễ dàng truy cập nhất. Bắt đầu từ trên xuống, từ trái sang phải. Dưới đây là một ví dụ wireframe với layout sử dụng grid :

wireframe-bare (1)

Đôi lúc, dựa vào mục tiêu đối tượng của bạn và thể loại web bạn đang thiết kế, bạn có thể sáng tạo theo ý muốn nhưng luôn phải ghi nhớ giữ phân cấp hệ thống thông tin khi trình bày. Đây là một ví dụ khác:

wireframe-bare-webwise

Đây là một layout cho một web blog với các vị trí dành cho quảng cáo và các ghi chú hướng dẫn dành cho khách hàng

E-27wireframe-homepage-BARE

Bước 7: Tinh chỉnh với sắc độ xám

Sử dụng các sắc độ xám sẽ giúp bạn xác định sẽ giúp bạn xác định các trọng yếu mà không cần tô các màu sắc hoàn chỉnh. Thực tế nó sẽ giúp bạn trong quá trình thiết kế trực quan sau này

wireframe-withgreys

Bước 8: Thêm chi tiết trên wireframe

Đây là bước không bắt buộc, nhưng nếu muốn điều chỉnh chi tiết bạn nên thử qua bước này. Ở bước này, bạn có thể thêm vào các chi tiết càng nhiều càng tốt, đây vẫn chưa phải lá lúc bạn quá tập trung vào các hình ảnh, đơn giản là có thể bạn muốn đặt các đoạn chữ và lên ý tưởng sử dụng các loại kiểu chữ.

webwise-home-wireframe

Bạn cũng có thể thử thêm một số màu sắc.

Ý tưởng chung đây là giai đoạn kết hợp giữa hình ảnh/ viết mã, thêm hoặc bỏ bớt chi tiết, hoàn thiện wireframe và kết thúc giai đoạn thử nghiệm. Các hoạt động trong giai đoạn này sẽ bao gồm lắng nghe các phản hồi và điều chỉnh wireframe trên phần mềm bạn đang sử dụng.

Nếu bạn đang phải làm việc với một đội ngũ lập trình viên, bạn sẽ mong muốn hoàn tất giai đoạn này để bàn giao cho họ viết mã framework cơ bản, để bạn rãnh tay hoàn thiện wireframe ở phần xử lý hình ảnh trực quan.

Bước 9: Chuyển đổi wirefame thành hình ảnh trực quan

Như đã nói ở trên, chúng tôi khuyên bạn nên thực hiện giai đoạn này với phần mềm Illustrator bởi vì bạn sẽ dễ dàng xuất tập tin sang định dạng .psd của photoshop với các layer có thể dễ dàng sửa đổi.

Photoshop Export Options

Đây là một ví dụ wireframe được chuyển đổi thành hình ảnh trực quan, các cấu trúc khung được giữ nguyên, mặc dù layout đã được tô điểm màu sắc và hình ảnh

webwise2010

Tóm lược

Đây chỉ là một trong những quy trình tham khảo, mỗi nhà thiết kế web có thể tự thiết lập các quy trình khác nhau tùy theo công việc cụ thể và kinh nghiệm của mình. Dù thế nào đi nữa, bạn không nên bỏ qua giai đoạn dựng cấu trúc khung (wireframe), vì đây là bước quan trọng để định hình bố cục thông tin, giúp khác xem dễ dàng thao tác và truy cập thông tin trên trang web dễ dàng (user friendly), đó cũng là một tiêu chí quan trọng để một trang web được đánh giá là hoàn hảo.

Biên dịch theo “A Beginner’s Guide to Wireframing” | Winnie Lim | http://webdesign.tutsplus.com/ 

Cơ bản về nghệ thuật sắp chữ – Typography

Cơ bản về nghệ thuật sắp chữ – Typography

1a3e916e06395191122636af8b02e97b

Theo Wikipedia định nghĩa typography là “nghệ thuật và kỹ thuật sắp xếp các kiểu để tạo cho ngôn ngữ có hình thức lôi cuốn để giúp việc học và nhận biết dễ dàng”. Typography được xem như một môn nghệ thuật bắt đầu từ ngày Johannes Gutenberg, ông tổ của ngành in cho ra đời những ấn phẩm đầu tay của mình. Tiếp nối cho đến thời đại kỹ thuật số, typography chiếm một vai trò đặc biệt như mọi người đều biết. Đối với những ai đang làm công việc liên quan đến thiết kế website, typography chính là một nền tảng mà bạn cần phải nắm rõ, và nếu bạn chưa biết gì về nó, tốt nhất bạn nên bắt đầu tìm hiểu và dành sự quan tâm thường xuyên hơn.

Typography bao gồm những gì?

Nghệ thuật sắp chữ – typography không chỉ là các loại kiểu chữ (font) đẹp mà còn rất nhiều chi tiết khác có thể liệt kê thành một bài viết, tuy nhiên về cơ bản, typography bao gồm các phần sau:

  • Typefaces hay còn gọi là font: kiểu chữ
  • Line height: Khoảng cách giữa các dòng
  • Point size: Kích cỡ chữ
  • Line lengh: Chiều dài các dòng
  • Line spacing: Khoảng cách các ký tự trong một chữ
  • Tracking : khoảng cách giữa các chữ trong tổng thể một khối chữ hay một đoạn văn bản
  • Kerning: khoảng cách giữa hai chữ

Nói một cách đơn giản, trong thiết kế website, typography là nghệ thuật giúp website dễ đọc và cuốn hút hơn thông qua việc sử dụng kiểu chữ

Nghệ thuật sắp chữ là một phần của công việc thiết kế website

Trước đây, các trang web thông thường là các trang văn bản với nội dung đa phần là các đoạn chữ. Ở thời điểm đó, 95% công việc thiết kế website có liên quan đến nghệ thuật sắp chữ – typography. Với công nghệ ngày càng phát triển, nhiều hình thức đa phương tiện khác được đưa vào các trang web như âm thanh, video clip, flash … những không vì thế mà typography mất đi vai trò then chốt của mình. Nội dung chữ trên trang web luôn được yêu cầu dễ đọc, lôi cuốn và phù hợp với tính chất của từng website.

95-percent-of-web-design-is-typography

Lựa chọn kiểu chữ

Hãy xem xét cách mọi người sử dụng các kiểu chữ trong công việc hàng ngày, Times New Roman, ArialVerdana là những kiểu chữ thường được ưa chuộng trong các văn bản, email… Những kiểu chữ này trở nên phổ biến bởi vì chúng đều thuộc hệ các kiểu chữ trang trọng. Tuy nhiên, không phải website nào cũng cần đến không khí trang nghiêm như trong phòng họp. Bạn nên lựa chọn kiểu chữ phù hợp với tính chất tổng thể website, Dù vậy nên tránh sử dụng quá nhiều kiểu chữ trên cùng một website. Quy tắc chuẩn là hãy chọn một kiểu chữ cơ bản (cho đoạn văn bản) và một kiểu chữ trình bày (td: cho tiêu đề, slogan)

typography+design+14

Sử dụng màu đúng cách

Đa phần các website lựa chọn chữ đen trên nền trắng, bởi vì đây là cách hiển thị chữ dễ đọc nhất. Nguyên tắc này đa phần các nhà thiết kế web đều nắm rõ. Tạo sự tương phản giữa chữ và nền là chưa đủ. Ví dụ: một kiểu chữ màu xanh dương đậm trên nền màu hồng, nếu nói về sự tương phản, nó hoàn toàn đáp ứng. Nhưng ngược lại nếu chữ màu hồng đặt trên nền màu tối có thể gây khó chịu cho người xem.

typography-mania-cover

Kích cỡ chữ

Đa phần các kích cỡ chữ trên website nằm trong khoảng từ 12 – 14 pixels. Tuy nhiên, với sự phát triển của công nghệ, có rất nhiều màn hình khác nhau theo từng thiết bị như TV, di động, màn hình laptop … do đó kích cỡ chữ nên hiển thị phù hợp theo từng thiết bị. Nếu chữ quá lớn, layout sẽ nhìn rất lộn xộn và người xem phải cuộn màn hình nhiều lần để đọc hết nội dung. Ngược lại nếu chữ quá nhỏ sẽ gây khó chịu cho người có thị lực mắt yếu hoặc người xem phải phóng to để xem, làm vỡ layout bạn muốn trình bày.

typography-0011

Yếu tố dễ đọc

Ngày nay, các trang web là nơi mọi người đa phần tìm đến với nhiều cầu khác nhau như tin tức, học tập hoặc giải trí. Để giúp người đọc có cảm giác thoải mái khi lướt các trang web, bạn nên chú ý đến hai yếu tố trong nghệ thuật sắp chữ – typography đó là cột chữ và khoảng cách.

Chiều ngang của các cột văn bản thường không được chú trọng, mặc dù nó tác động mạnh đến khả năng dễ đọc đối với người xem. Trong in ấn, các cột văn bản thường có chiều ngang khoảng 45 đến 75 ký tự, nhưng trong thiết kế web, yếu tố này thường không được thuân thủ. Để hiển thị tốt bạn nên cân nhắc các cột văn bản không vượt quá 80 ký tự hoặc có chiều ngang không quá 80 ems.

Yếu tố thứ hai đó là khoảng cách thích hợp . Leading là khoảng cách giữa các dòng chữ và tracking là khoảng cách giữa các kú tự trên tổng thể các khối chữ, bạn nên dùng các thuộc tính CSS để xác định line-height khoảng cách các dòng chữ) và letter-spacing (khoảng cách các chữ) để giúp các văn bản trên trang web của mình hiển thị dễ đọc nhất.

Typography là nền tảng của một trang web đẹp. Nếu bạn là một nhà thiết kế web không dành thời gian để chăm chút từng chi tiết cơ bản của các đoạn văn bản, thì cho dù bạn có khả năng đồ họa tốt vẫn không thể giúp trang web của mình có một vẻ đẹp toàn diện được.

Biên soạn dựa trên “Basic Guide to Typography” | webdesign.org

10 web layout cơ bản trong thiết kế website – p2

Tiếp theo phần 1

6/Kiểu thanh lề cố định (fixed sidebar)

layoutideas-6-1Đa số các website ngày nay đều có thanh liên kết nằm ở phía trên theo chiều ngang, một layout cũng thường phổ biến trước đây đó là có thanh lề trái cố định. Phần lề này sẽ không di chuyển khi nội dung cuộn theo chiều dọc. Đây là cách giữ cho thanh liên kết luôn hiện diện trên màn hình cho dù người xem di chuyển thanh cuộn dọc của trình duyệt. Phần nội dung bên phải có thể sử dụng layout khác tùy ý, bạn có thể có những ý tưởng để sắp xếp tùy theo nội dung cụ thể.

Ví dụ thực tế
Cả hai layout dưới đây đều nhìn khá khác biệt mặc dù cùng ý tưởng sử dụng thanh lề cố định (fixed sidebar). Layout đầu sử dụng kiểu layout 4 khối hộp cho nội dung bên phải, một biến thể của kiểu 3 khối hộp mà chúng ta được biết ở trên. Layout 2 cũng sử dụng layout out 4 khối hộp, nhưng đảo vị trí 4 khối hộp nhỏ lên trên khôi hộp lớn. Một lần nữa, bạn có thể áp dụng nhiều ý tưởng thiết kế web dựa vào các khung có sẵn mà không sợ các trang web nhìn giống nhau rập khuôn.

layoutideas-6-2layoutideas-6-3

7/Kiểu thư viện ảnh.

layoutideas-7-1Đa số người xem đều thích các trang thư viện ảnh (gallery), nhưng làm thế nào để có layout đẹp và đơn giản nhất? Tất cả bạn cần là một bố cục theo dạng lưới (grid) vững chắc, các thumbnail ảnh đồng dạng và một khoảng trống phía trên cho các tiêu đề và phụ đề. Thủ thuật mấu chốt là nhấn mạnh ở phần tiêu đề. Bạn có thể dùng các font chữ độc đáo hoặc sáng tạo đồ họa để tạo ra phần header ấn tượng.
Bạn có thể thay đổi dùng các hình vuông, hình tròn hoặc các hình chữ nhật có góc bo tròn để tạo ra các hình đồng dạng cho các hàng ảnh thumbnail khác lạ thay vì hình chữ nhật.

Ví dụ thực tế

Ví dụ bên dưới là một trang web của nhà thiết kế web chuyên nghiệp. Anh ta sử dụng logo của các công ty khách hàng để giới thiệu các dự án mà họ đã thực hiện. Điều này chỉ ra rằng, ngay cả khi trang web của bạn không phải thực sự là một thư viện hình ảnh, bạn vẫn có thể sử dụng nó cho các trang giới thiệu dự án, sản phẩm … thay vì chỉ liệt kê theo dòng một cách nhàm chán.

layoutideas-7-2

8/ Kiểu dùng ảnh có kích thước lớn làm trọng tâm

layoutideas-8-1Layout này khá phổ biến trong các website của cộng đồng các nhiếp ảnh gia. Ý tưởng cơ bản là sử dụng một vị trí có kích thước lớn để trình bày các hình ảnh ấn tượng nhất hoặc một ảnh thiết kế đồ họa độc đáo bên phải, kết hợp với một cột thông tin bên trái có thanh liên kết và logo cùng các nội dung khác.Bạn có thể thử nghiệm hoán đổi vị trí trái phải của 2 phần với nhau, thay thế vị trí thanh liên kết để tìm ra một layout riêng cho mình.

Ví dụ thực tế

Website của một nhiếp ảnh gia dưới đây đã biến tấu vị trí nổi bật bên phải thành một slide trình diễn ảnh theo chiều ngang. Thanh trượt ngang sẽ xuất hiện khi đặt con trỏ lên trên bức ảnh.
Cũng với layout này, bạn có thể sáng tạo ra nhiều cách khác nhau để trình bày nội dung chính bên phải hấp dẫn hơn như hộp banner cuộn, hoặc cuộn ảnh theo chiều dọc màn hình.

layoutideas-8-2

Kiểu lưới đa năng (grid system)

layoutideas-9-1Sử dụng lưới đa năng là layout phức tạp nhất trong bài viết này, nó có thể chứa tất cả nhiều loại nội dung từ văn bản, âm nhạc cho đến các clip video. Bạn có thể đặt mọi thứ vào trang mà vẫn giữ layout không rối tung lên.
Điểm then chốt của layout này nằm ở phần nữa dưới, đó là thực chất là khối hình hộp lớn chứa các những khối hộp nhỏ hơn. Hình hộp này phân chia các khoảng trống trên trang, tạo bố cục vững chắc nhưng vẫn đảm bảo tính đa dạng.

Ví dụ thực tế

Bạn sẽ có chút bối rối nếu chỉ nhìn vào bộ khung sườn ở trên mà chưa nhìn thấy một nó được áp dụng vào một website thật. Website ví dụ bên dưới sử dụng rất nhiều nội dung khác nhau từ giới thiệu các hoạt động nghệ thuật và văn hóa cho đến các dòng trạng thái Twitter, hình ảnh, danh sách …

Tuy nhiên, tất cả đều nằm trên bố cục lưới vững chắc, từng nội dung được sắp xếp ở các vị trí thích hợp. Bí quyết là nội dung nằm theo từng khối, có cái tập trung ở những khối hộp lớn, có cái được chia nhỏ ra thành những khối hộp nhỏ, tạo sự đa dạng cho bố cục, thích hợp cho nhiều loại nội dung.

layoutideas-9-3 (1)

vbrsite-10

Kiểu sử dụng ảnh nền kín trang

layoutideas-10-1Layout cuối cùng trong danh sách này lý tưởng đối với các website của nhiếp ảnh gia, sử dụng hình nền lớn phủ kín trang và chỉ hiển thị một số nội dung hạn chế.
Vì có hình nền che kín trang, nên để nội dung các đoạn chữ có thể được đọc rõ ràng, chúng phải được đặt trên một màu nền khác có độ mờ che hình nền bên dưới.
Bạn có thể thêm thanh liên kết và logo ở trên đầu trang hoặc sắp xếp chúng trên các khối hộp được chia thành từng khu vực như khung sườn mẫu này.

Ví dụ thực tế

Như đã giới thiệu, kiểu layout này chỉ thích hợp cho các trang không có nhiều nội dung. Ví dụ đây là website của nhiếp ảnh gia, các nội dung được sắp xếp gọn gàng trên các khối hộp màu tối, giúp các chữ được trình bày rõ ràng và vẫn giữ được một phần nền ấn tượng.

layoutideas-10-2

Kết luận

Có một vài điểm chúng ta cần làm rõ trước khi kết thúc bài viết này. Đầu tiên, rõ ràng chúng ta không thể có một layout nào đó có thể phù hợp trong mọi tình huống, nhưng chúng ta vẫn có thể sử dụng các khung sườn mẫu một cách khoa học đáp ứng đa số các trường hợp.
Kế đến, các layout này không phải cách để bạn thực hiện hàng loạt các website giống nhau, nó đơn giản chỉ cung cấp nền tảng cơ bản, dựa vào đó bạn có thể phát triển các ý tưởng riêng cho thiết kế của mình.
Cuối cùng, bạn đừng bao giờ áp dụng những ý tưởng từ các layout mẫu quá máy móc. Mỗi layout mẫu có thể thay đổi tùy theo yêu cầu cụ thể của từng dự án, thậm chí chúng ta có thể pha trộn, lắp ghép các layout lẫn nhau để tạo ra ý tưởng mới.

Nguồn tham khảo: 10 Rock Solid Website Layout Examples | Designshack.net