Xuất trang web từ Photoshop sang HTML bằng cách phân mảnh

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é

Okie dukkie! giờ tiến hành nào

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ình 1. 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.

(Sưu tầm)