PDA

View Full Version : [Q] Cắt ảnh trong Photoshop



Nicky
22-03-2003, 20:30
Hey there !
Nicky nghe nói có thể tạo trang Web bằng Photoshop, tức là vẽ nội dung trang Web sau đó dùng Photoshop để cắt ra thành các ảnh nhỏ rồi dùng HTMl ghép lại, như thế ảnh sẽ không khác gì nguyên bản.
Nhưng Nicky không biết làm sao để cắt 1 ảnh lớn và lưu lại thành nhiều ảnh nhỏ. Mong mọi người giúp đỡ.
Thx !

ongchu85
03-04-2003, 13:51
Cái này bạn dùng công cụ slice tool (K) để chia nhỏ ảnh lớn của bạn thành từng ô nhỏ .... sau đó bạn vào file--> save for web (Alt+Shift+Ctrl+S) va` chọn đường dẫn .
Sau đó dùng html ghép lại là được ...

9Star
05-04-2003, 09:10
Khi cài PS bạn nên cài cả ImageReady, sau khi xử lý xong hết hình bên PS bạn Jump qua bên ImageReady rồi cắt và có thể lưu luôn thành file html....

Nicky
22-04-2003, 19:08
Có thể hướng dẫn cho em cụ thể một chút được không. Thx

let-it-be
26-04-2003, 18:26
Ctrl+H ->slice tool (K), drag mouse -->save for web ( alt+trl+shift+S).

genuine
27-04-2003, 09:10
tốt nhất bạn đừng nên sử dụng slice và ImageReady, có thể nhanh nhưng khi làm web thì thật sự sẽ gặp rất nhiều rắc rối... Cách tốt nhất là thủ công... Vẽ Guide và chọn cắt riêng ra từng mảnh nhỏ, save riêng ra và sau đó ghép lại bằng DW hay FP thì hay hơn...

thienancn4
29-04-2003, 11:04
làm được hả,tui mới học xong nên chưa biết

Nicky
29-04-2003, 19:55
Đúng rồi.
Nicky đã vẽ Guide vì thấy người ta cũng làm thế. Nhưng khi vẽ xong không biết làm sao để lưu lại cái phần đó...chán..hic..help..
Thx !

let-it-be
03-05-2003, 15:11
trang genuine.acme.com ver3 có fải sử dụng slice ko? vẽ guide là vẽ gì thế?

genuine
05-05-2003, 22:46
genuine.acmevn.com ko phải sử dụng slice đâu, Guide line là các đường kẻ được kéo ra từ ruler đó, chỉ có tác dụng làm đường gióng thôi. Khi cắt 1 trang web thì phải tính sẵn một hệ thống table html trong đầu, chia các hình như thế nào, bao nhiêu hàng bao nhiêu cột, table nào lồng trong table nào.... Sau khi vẽ Guide line theo hệ thống table đó xong thì dùng công cụ Marquee chọn 1 vùng hình, Crop và save as for web... Sau đó nhét vào table... cứ như vậy cho tới khi hoàn chỉnh trang web.

Nicky
07-05-2003, 20:19
Phải làm thủ công như vậy sao ?
Nhưng như vậy cũng ổn rồi. Cảm ơn mọi người đã giúp đỡ.

anh
08-05-2003, 00:42
Slice là công cụ tốt nhất để làm web. Cả Photoshop và Image Ready đều tạo sẵn html page và hình ảnh được lưu vào folder image. Nếu làm animation, button thì jump qua Image Ready còn không thì save for web từ PS cũng được. Sau đó muốn đổ text hay lập trình thì dùng FP hoặc DW để edit là được. Tóm lại PS & Image Ready là công cụ tốt nhất để làm web layout (images & html). Tôi đã thiết kế hàng chục website như vậy

Tran Minh Hong
18-05-2003, 23:46
Làm vậy xưa rồi
Bạn tạo các đường Guide,sau đó cắt bằng công cụ Slice
Save for web chọn save HTML & images bó tự sắ xếp thành một trang web hoàn hảo luôn

SUPERKID1412
01-09-2003, 03:58
Đúng rồi đó Tran Minh Hong việc gì phải làm thủ công như mấy bác kia, đúng là Junior Member có khác, nhưng tui ghét thiết kế Web lắm

VTT17
02-09-2003, 17:32
Cái công cụ Slice còn có tác dụng tự lập 1 file HTML sau khi đã cắt , cho tất cả các phần image của trang web vào 1 folder tên images và có thể tạo cho nó sẵn các đường link đến các page khác trên cùng 1 website .

winabe
01-10-2003, 17:14
genuine.acmevn.com ko phải sử dụng slice đâu, Guide line là các đường kẻ được kéo ra từ ruler đó, chỉ có tác dụng làm đường gióng thôi. Khi cắt 1 trang web thì phải tính sẵn một hệ thống table html trong đầu, chia các hình như thế nào, bao nhiêu hàng bao nhiêu cột, table nào lồng trong table nào.... Sau khi vẽ Guide line theo hệ thống table đó xong thì dùng công cụ Marquee chọn 1 vùng hình, Crop và save as for web... Sau đó nhét vào table... cứ như vậy cho tới khi hoàn chỉnh trang web.


Các bạn có biết chổ nào có tutor chỉ cách xử dụng "guide line" để cắt 1 trang web không ? Tôi rất muốn học cái cách thức làm trang web kiểu cắt những hình ảnh theo cách "guide line", nhưng tôi chưa có 1 khái niệm rõ ràng về việc này !

le_linh_tuyen
06-11-2009, 10:06
Tạo một mẫu website gọn đẹp
Cập nhật ngày: 17/02/2009, 21:11 GMT+7.
Theo hướng dẫn này, Tôi sẽ cho bạn thấy cách để thiết kế bố cục website gọn đẹp và chuyên nghiệp. Bạn đã sẵn sàng chưa? Chúng ta hãy bắt đầu nhé

Bước 1: Hãy khởi động Adobe Photoshop và tạo một bản ghi mới (778px x 600px) rồi đổ đầy nó bằng màu xám nhẹ ( #F1F1F1) .



Bước 2: Tạo một lớp mới. Hãy áp dụng công cụ tạo hình chữ nhật cho lớp mới. Chọn kích cỡ của vùng lựa chọn trên lớp mới là 728 x 600 pixel. Khoanh vùng chọn cố định theo công cụ tạo hình. Thay đổi kiểu trên thanh tùy chọn Normal đối với kích cỡ cố định. Áp dụng chiều cao và chiều rộng của vùng chọn theo từng yêu cầu.



Đổ đầy bằng màu trắng (#FFFFFF). Hãy đảm bảo rằng lớp mới của bạn được nằm ngang ở giữa Canvas. Nhìn giống như hình này.



Bước 3: Hãy áp dụng tuỳ chọn Blending- Outer Glow tới lớp màu trắng( nhấp chuột phải vào lớp màu trắng để ứng dụng tuỳ chọn blending). Các tính năng Blend Mode – Outer Glow cũng ứng dụng tuỳ chọn này cho lớp của bạn.



Nền của bố cục website được hoàn tất.



Bước 4: Hãy bắt đầu với phần đầu trang, nó là một phần quan trọng nhất của bố cục website bởi vì phần còn lại của website thì giống nhau. Hãy thêm lớp mới trên canvas của bạn bằng cách chọn ( ctrl+N- bạn tuỳ ý đặt tên ) . Hãy chọn kích thước 728x20 bằng việc sử dụng công cụ tạo hình hình chữ nhật tại phía trên của canvas và dùng thêm màu xanh lục để lựa chọn vùng này ( # 494F1C ) .



Bước 5: Hãy thêm lớp mới trên canvas của bạn bằng cách chọn ( ctrl+N- bạn tuỳ ý đặt tên) . Thêm hình ảnh có kích thước 728x 125. Lúc này nhìn nó giống như hình này.



Bước 6: Tương tự giống như bước 4. Thêm một lớp mới nữa rồi chọn kích thước 728x25 và đổ đầy bằng mã màu # B1C144.



Bước 7: Hãy tạo thêm logo cho phần đầu của website và thêm một lớp mới rồi tạo tuỳ chọn hình chữ nhật cỡ 285x 85. Bổ sung thêm màu trắng trên lớp mới tuỳ chọn của bạn. Giảm 50% độ mờ của lớp. Hãy ứng dụng outer glow cho lớp này ( tương tự giống bước 2). Thêm logo của bạn trên lớp màu trắng và bây giờ ta có một hình như dưới đây:



Bước 8: Hãy tạo submenu và thêm một lớp mới nữa . Tạo tuỳ chọn hình chữ nhật cỡ 175x 370 và bổ sung màu xám nhạt ( # F1F1F1 ). Đừng loại bỏ tuỳ chọn của bạn mà ứng dụng stroke để lựa chọn. Vào phần Edit> Stroke Apply Outside stroke để chọn mầu D1D1D1.






Bước 9: Lặp lại bước 8 bằng cách thay thế kích thước 530x 370. Điều chỉnh lớp mới của bạn theo yêu cầu và lúc này thì Canvas của bạn sẽ giống như hình dưới đây phải không ?



Bước 10: Bây giờ đến phần cuối của bố cục website. Hãy ứng dụng một lớp mới trên canvas. Tạo tuỳ chọn cỡ 728x25 và thêm màu xám nhẹ ( # F1F1F1 ).



Bước 11: Ứng dụng đoạn text trên bố cục trang web của bạn với bất cứ phông chữ nào mà bạn thích. Tôi đã sử dụng phông chữ century gothic cho phông chữ trên menu vì đoạn tin tôi đã dùng phông chữ Arial rồi. Bố cục website cuối cùng đã được hoàn tất như hình ở dưới đây:



Hãy thay đổi màu sắc, hình ảnh và kích cỡ như bạn muốn và bạn hãy thiết kế những bố cục website mới nữa nhé vì nó thực sự dễ dàng.