Cắt PS sang HTML

Cách
này dựa trên tính năng tạo hình nền cho cell hoặc column bằng một hình
nhất định. Cho nên thay vì bạn cắt nguyên một cái bar to đùng, thì thay
vào đó bạn chỉ cắt một mẩu rộng khoảng 1Px và chiều cao phụ thuộc vào
đối tượng đó.
Sau đó thì dùng tính năng set background cho cell để trình thiết kế web
của bạn tự nhân nó lên và phủ hoàn toàn chiều rộng của hình.

1. Bạn hãy bỏ ra khoảng 5 phút để quan sát xem giao diện của bạn có
những điểm giống nhau nào mà sau này có thể dùng chung một file hình
cho nhiều vị trí. Ở bài này thì những Bar như Upper Banner, Under
Banner, Navigation ... đều có thể dùng chung. Cho nên chúng ta sẽ tiến
hành cắt như sau. Hình minh hoạ ở dưới tôi đã chỉ rõ những vùng có điểm
tương đồng. Bạn quan sát chút nhé

2. Tiếp đến và quan trọng hơn cả sau bước quan sát những điểm chung là
phân vùng những vùng cần cắt. Để làm được bạn tiến hành như sau:
- Nhấn Ctrl-R để thể hiện thước kẻ ở bên dưới và bên phải của tài liệu (nếu chưa hiển thị)

- Chọn Move Tool và kéo những đường guideline như trong "kế hoặch" quan
sát của bạn. Ở bài này tôi sẽ phân vùng như hình ở bước 1.

3. Một công cụ tối cần thiết cho việc cắt này là Info Palette. Nó chỉ
cho bạn biết miếng cắt đó có kích thước chính xác ntn. Vào Window >
Info. Một Info Palette sẽ hiện ra. Vùng màu đỏ là vùng bạn cần quan
tâm. Ở ví dụ này tôi tạo một vùng lựa chọn nhỏ và thông số của nó là W:
7; H: 25. Đây là chiêu cao tương ứng của vùng đó.

4. Tiếp theo là chúng ta sẽ tiến hành miếng cắt đầu tiên, bạn dùng công cụ Crop và cắt một hình như sau.



Ở vùng cắt này bạn thấy tôi cắt một mẩu có chiều cao là 16 Px và chiều
rộng bằng 1 Px ở điểm thứ 1 trên hình 1. Đây là thanh trên cùng của
giao diện. Khi cắt xong bạn nhấn Ctrl-S để lưu nó lại. Nó sẽ hỏi bạn có
Crop không, nhấn Crop và lưu nó lại dưới định dạng là Gif. Bạn phải nhớ
kích thước của hình này để sau này cho vào trình soạn thảo web để tạo
bảng tương ứng với nó

5. Tiếp đến tôi cắt góc của hình màu xanh, điểm số 8 trên hình1. Làm
tương tự như bước trên và lưu nó lại cũng với định dạng là Gif.



6. Ở điểm số 7 bạn cũng cắt một hình tương tự như bước 3. Nhưng với
thông số H: 1 Px và W: 12 Px tương ứng với vùng góc ở bước 5.

Về cơ bản chúng ta chỉ cần 2 hình đó là đủ. Những góc còn lại như góc
trên bên phải, dưới bên phải và dưới bên trái. Chúng ta sẽ dùng lệnh
Edit > Transform để có hình tương ứng mà không cần phải cắt nhiều
lần.

7. Cứ tiếp tục cân đo đong đếm hết những vùng ở trên hình 1, cho đến khi bạn có toàn bộ những hình gốc đó.

Khi bạn cắt xong thì mở trình soạn thảo web của bạn lên. Tôi quen dùng Frontpage nên tôi mở nó ra và tạo một bảng như sau:


8. Ở hình này tôi đã chèn hình và set thành background rồi. Nhưng nếu bạn làm thì bạn hãy tiến hành như sau:

Mở một bảng ban đầu là 5 cột và khoảng 20 dòng.

Dòng đầu tiên trên hình mũi tên màu đỏ là cho thanh bar trên cùng của giao diện.

Dòng thứ 2 là cho phần trên banner

Dòng thứ 3 là cho banner

Bạn chú ý kích thước của một dòng được định dạng bằng cách sau. Thông
số của nó phụ thuộc vào hình mẫu bạn đã cắt. Bạn nhấp chuột phải vào
dòng bạn muốn tạo và chọn Cell Properties. Một hộp thoại sẽ hiện ra như
hình. Ở hai vùng tô màu đỏ là kích thước và hình tôi dùng để tạo thành
background cho nó. Với thanh bar này có chiều dài là 778 Px và chiều
cao là 15 Px. Phần Background bạn đánh dấu vào hộp kiểm Use background
picture và Browse đến hình bạn đã cắt.


9. Cứ làm tương tự như thế cho banner và khúc trên banner, thanh
navigation cũng vậy. Bạn phải thực hành nhiều mới tạo ra kỹ năng cho
mình và làm chính xác hơn.

10. Tôi sẽ giúp bạn thêm một phần nữa là phần tạo hộp văn bản. Với
miếng cắt ở bước thứ 5. Bạn sẽ phải tạo một bảng như hình bước 7 có
những mũi tên màu đỏ chỉ ra. Gồm 3 dòng và 3 cột. Bằng cách thiết lập
độ lớn của dòng và cột như bước 8, bạn sẽ được hình sau

Ở hình bạn đã cắt có kích thước là 12x12 Px cho mẩu lượn tròn ở góc. Do
vậy bạn phải thiết lập ô đó có kích thương tương ứng. Sau khi thiết lập
xong bạn chọn Insert > Picture > From File và dẫn đến mẩu cắt ở
bước thứ 5. Ở cột ngay dưới nó, bạn thiết lập background với mẩu cắt có
kích thước là H: 1 Px và W: 12 Px.

Sau khi làm xong hai phần này, bạn sẽ còn lại 3 góc và những cạnh còn
lại. Bạn mở Photoshop lên và mở mẩu cắt góc ở bước 5 ra. Thường thì khi
ta lưu lại dưới định dạng Gif thì hình đó sẽ là Index. Cho nên bạn phải
chuyển nó thành RGB trước khi sửa chữa. Do vậy bạn vào Edit > Mode
> RGB. Tiếp theo vào Edit > Transform > Rotate 90 CW để được
góc trên bên phải. Lưu nó lại và lập lại bước 10 để có kết quả như hình
trên.

11. Bạn quan sát trên hình đầu tiên ở bước 1. Tôi có tạo bảng cho những
đường phân chia của thanh Navigation ngang. Ở Photoshop bạn chỉ phỉa
cắt một hình như hình dưới. Sau đó dùng lệnh copy để dán vào những chố
giống nhau.

Tất cả chỉ có vậy thôi! cái chính là cần quan sát và làm thật tỉ mỉ.
Tuy rất lâu nhưng cái mà chúng ta được thì nó xứng đáng với công lao
chúng ta bỏ ra. Cả cái giao diện như thế này mà chỉ có 9-10 hình nhỏ
xíu thì quả là mỹ mãn rồi. Bạn thử làm một phép so sanh xem. Với một
cái banner có chiều cao là 140x780 thì nó sẽ năng khoảng trên 100Kb.
Nhưng nếu bạn chỉ cắt một mẩu bé xíu thì nó chỉ nặng chừng 74byte. Nhỏ
hơn gấp hàng ngàn lần.

Tôi biết khi bạn đọc bài này lần đầu tiên sẽ rất khó hiểu và khó tưởng
tượng, nhưng tôi tin với động lực thúc đẩy là niềm đam mê làm web của
bạn, bạn sẽ thành công.