Tạo WordPress Theme – Slice hình
- December 2, 2009
- 22 comments
Đây là phần thứ 3 trong series về cách tạo WordPress theme. Trong phần này chúng ta sẽ bắt đầu cắt hình để chuẩn bị cho phần tiếp theo là phần dựng giao diện trong HTML. Tuy làm trong Photoshop thì nhiều mà lúc cắt ra chẳng được bao nhiêu, chỉ lấy có mấy miếng. Nghĩ cũng buồn 
.
Thực ra khi cắt hình trong Photoshop có nhiều cách để cắt như sử dụng công cụ Slice chẳng hạn. Nhưng tôi thấy cách đó cứ phải kéo kéo mệt làm sao á. Do vậy tôi từ trước tới nay toàn cắt hình bằng Crop Tool. Có thể cách của tôi không phải là cách tối ưu, nhưng tôi thấy nó cũng khá dễ sử dụng. Đặc biệt là những hình nhỏ tôi có thể Copy và Paste rất đơn giản và chính xác đến từng Pixel. Tuy nhiên nếu bạn nghĩ có cách khác hay hơn, hãy chia sẻ dưới phần Comment ở dưới.
Thời lượng: 16:41
Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 62 Mb
Sponsored Links
« Điểm mạnh và yếu của Video Tutorial
khi lên hình của website trên photoshop thì thấy rất “Hoành Tráng” nhưnng khi làm web thì lại cần hầu như rất ít. Nên nhiều khi tôi rất lười làm cái layout trên photoshop này. Cứ ngồi vẽ ra trên giấy rồi vào trong photoshop làm mấy cái đơn giản rồi viết layout bằng html luôn.
Như trong Video trước, làm sidebar và phần conten mệt không, thế mà khi vào đây có cần nhiều đâu, cần mỗi cái sitebar_bg và cái conten_bg
Hehe cũng có thể do tôi lười
Thực ra tôi nói phí công là nói vui thôi. Còn trang web nào cũng phải qua công đoạn này hết. Bởi vì trong Photoshop bạn mới biết được màu sắc, khoảng cách, kích thước, vị trí của các thành phần.
Còn nếu chỉ vẽ ra giấy thôi thì bạn không thể xây dựng trang web theo đúng ý tưởng được. Trừ khi là bạn có giao diện rồi nhưng chỉ muốn chỉnh sửa lại.
Phong cách thiết kế mới ko cần làm giao diện trên pts chỉ cần phác thảo rồi làm html hehe
Layout giao diện rồi Slice sang Html + Css mới “Quốc Tế”
haha “quốc tế” quá đi chứ nị
Nếu không có PS thì coi như Web nhìn xấu tệ.
bây giờ có fireworks làm giao diện web tốt hơn PTS rất nhiều, cắt slide rất thích.Các bạn có thể nghiên cứu thêm cái này.
Bác DW có lẽ nên nghiên cứu thêm fireworks
rồi có gì chia sẻ bọn em với nhé
Mình không có được cái micro nào ngon để có thể làm tut cho các bạn.
Cái firework này mình mới nghiên cứu nhưng thấy rất thich nó.
Trang web của Bác DW là teach cho người mới bắt đầu với web mà, nói như các Bác thì em cũng chẳng bít tí gì lun
@Quac anh: ra tiem, 50 – 70 là có cái xài rồi, mình có rồi nhưng không biết làm cái gì để upload lên he
Cả nhà bàn rôm rả ghê, mình đứng ngoài hóng chút ! hj ^_*
Cách cắt những khung nền có 4 góc bo tròn như thế nào vậy anh em,mong anh em chỉ giúp tớ. Thấy anh DW cắt phần pages_bg nó chỉ chút xíu nên hok nặng lắm,còn nếu trường hợp cắt những nền khoảng 900×500 thì chả nhẽ cắt hết lun hả ta. Anh em giúp tớ với !
Hình như cái góc bo tròn mà bạn nói ở đây là cái -moz-border-radius, ví dụ “-moz-border-radius:10px” là làm bo tròn 4 góc. Cái này đối với IE là tịt, nó không hiển thị góc bo tròn mà cứ vuông thành sắc cạnh. Còn với chrome và firefox thì ngon lành(Firefox đẹp hơn thì phải
) ).
!
Cái 900×500 ở đây bạn nói là gì? Nếu như theo tut này thì bạn chỉ cần cắt theo toàn bộ chiều cao, còn phần width thì chỉ cần 1 đoạn, đặt thuộc tính lặp của background là repeat-x top left là được. Không biết có đúng ý bạn ko nữa, nếu không phải thì bỏ qua nhá
Oh thank cậu,tớ cũng thấy anh DW làm thế,lấy 1 ít chiều cao và chiều rộng,nhưng lấy vậy thì 4 góc bo tròn của hình hok đc lấy vào,còn lấy đầy đủ thì nặng load hok nỗi ^^ Dzị cóa cách lào hẽm ta ^^
@ Danienloc: Ý bạn là gì nhỉ?
)
Bạn thử làm thế này đi: Bạn cắt 1 ít chiều cao và chiều rộng…cắt xong bạn để thuộc tính repeat-x top left. Xong rồi bạn đặt thêm thuộc tính -moz-border-radius:10px; là nó sẽ bo tròn 4 góc luôn. (Riêng IE ko hiển thị thôi
Anh có một bài hướng dẫn cách làm bo tròn góc rồi mà nhỉ? làm bằng CSS, jQuery và cả hình ảnh nữa đó mà. Có video rồi cơ mà nhỉ?
Uả ủa có rồi hả anh ^^ úi úi thế mà em chưa down về huhu >”< Thank cả nhà ^^
Phần chữ , ở footer ngoài cách sử dụng hình ảnh, ta có thể sử dụng thêm một cách khác là cufon font, hoặc flash
http://www.wordpressvn.net/huong-dan/cufon/
(cái này mình chưa làm thử, vì cũng chỉ là mới học ) có gì chia sẻ không đúng mong mọi người thông cảm.
Theo mình việc làm Layout bằng PTS là rất cần thiết, nhưng công đoạn mà slide tất cả thành ảnh rồi mới sang HTML làm CSS thì nhanh bị chán. Và đôi khi vẫn phải vô lại PTS để làm lại.
Mình hay làm theo cách là Layout bằng PTS rồi thì vông luôn Dreamweaver CSS, đến chỗ nào cần hình ảnh, cần kích thước, cần đo màu,… thì mới nhảy qua PTS cắt lấy và ghép vô tinh chỉnh cân đối trong Dreamweaver.
Trang web này rất hay các Video TUT bác hướng dẫn rất tuyệt có điều hơi nặng do đó load hơi chậm
Cảm ơn bác về videos
ui ui hay quá cảm ỏn nhiều học rất nhiều từ anh và Anh CS
thanks phát cho có hứng…..