Hướng dẫn thiết kế userbar

Thảo luận trong 'Thiết kế Web' bắt đầu bởi Sâu Róm, 8 Tháng mười hai 2006.

  1. Sâu Róm

    Sâu Róm Member

    Như đã hứa, mìh hướng dẫn luôn cách làm 1 cái userbar căn bản, cái này chủ yếu là ý tưởng, ai có ý tưởng hay thì sẽ đẹp thôi.

    Cái này mình làm = photoshop 8 + imagaready.
    Đầu tiên mở 1 file psd 350 x 30.

    [attachmentid=1208]

    Chọn màu chủ đạo, ở đây mình chọn màu xanh lá.

    [attachmentid=1209]

    Tạo 1 layer mới, chọn Gradient tool.[attachmentid=1210]
    Chọn 1 điểm bên bên phải tấm hình, giữ chuột và kéo từ phải sang trái, từ điểm đặt sang điểm đích

    [attachmentid=1211]

    Ta sẽ dc như hình bên dưới.

    [attachmentid=1212]

    Tiếp theo mở 1 file mới kích thước 3 x 3 và chọn trong suốt

    [attachmentid=1213]

    ấn Ctrl + 0 (Ins) rồi vẽ như hình sau :

    [attachmentid=1214]

    Bấm Ctrl + A (chọn tất cả) rồi vào Edit >> Define Pattern... , sau đó đóng file này lại. Trở lại file mình đang làm
    Tạo layer mới, dùng công cụ như hình và chỉnh các thông số giống hình dưới

    [attachmentid=1215][attachmentid=1216]

    Tô hết toàn bộ ta dc như hình sau.

    [attachmentid=1217]

    Chọn tiếp công cụ vẽ hình elips

    [attachmentid=1219]

    Vẽ 1 hình như sau

    [attachmentid=1220]

    Bấm chuột phải vào vùng vừa chọn, chọn fill. Điền vào use : white, mod : nomal, opacity : 20 ta dc như hình sau.

    [attachmentid=1221]

    Đến đây cơ bản là xong, giờ chỉ việc thêm text, hình ảnh để trang trí ta sẽ dc như hình sau

    [attachmentid=1222]

    Coi như xong 1/2
    Còn vụ chữ chạy từ dưới lên hẹn khi khác, giờ bận roài.
     
  2. Adelaidegirl

    Adelaidegirl Ja` cả khú đế đại vương Staff Member

    m xung phong hỏi trước
    imagaready la` cái j` vậy n

    muốn làm lớn hơn cũng được phải ko n
    nãy h thấy n toàn hướng dẫn làm trong photoshop ko thoai ... đâu thấy cái j` có vẻ là imagaready đâu phải ko ạh
     
  3. Sâu Róm

    Sâu Róm Member

    <div class='quotetop'>Trích dẫn(Adelaidegirl @ Dec 9 2006, 11:13 AM) [snapback]90381[/snapback]</div>
    imageready giống như photoshop, khi cài photoshop nó sẽ cài luôn cái imageready.
    imageready dùng để làm ảnh động, chưa thấy có nó vì chưa có viết tiếp, giờ mới viết tiếp nà ^^.
    Muốn làm lớn hơn cũng dc thôi, chỉ cần lúc đầu tạo 1 file bự bự, rồi chọn font bự bự, hình bự bự là dc :))
    -----------

    Sau khi thêm mắm thêm muối ta dc như hình sau

    [attachmentid=1222]

    Sau đó thêm vào 2 dòng text để nó thay phiên nhau chạy lên xuống.

    [attachmentid=1233]

    Ở đây tui chọn nguyen hoang va big family
    Chuyển sang imageready

    [attachmentid=1234]

    Vào tab windows, check vào animation. Ở đây xin nói thêm về việc set frame như thế nào để 2 dòng text thay phiên nhau chạy lên xuống.

    Ta chia quá trình chuyển động thành 4 phần. Tạm gọi big family là BF, nguyen hoang là NH
    1. NH sẽ nằm khuất dưới đường biên dưới, BF sẽ di chuyển từ giữa lên gần đầu đường biên trên.
    [attachmentid=1235]
    2. NH bắt đầu di chuyển từ dưới lên giữa, BF sẽ di chuyển ra hẳn ngoài đường biên trên.
    3. NH lặp lại thao tác 1 tức là di chuyển lên gần đường biên trên.
    4. NH di chuyển hẳn ra ngoài, BF từ dưới di chuyển lên giữa.
    5. ... trở lại từ đầu.

    Bây giờ là thao tác. Nhớ làm theo phân tích ở trên.
    Để như trong hình, lưu ý NH nằm sát đường biên dưới.

    [attachmentid=1236]

    New layer, Dùng chuột chọn BF rồi di chuyển lên trên (dùng phím mũi tên thay cho chuột cho dễ). Chọn tween rồi chọn 5 frame(số frame càng cao thì chuyển động càng mượt nhưng dung lượng file sẽ tăng), ok ta dc như hình sau. Set delay.

    [attachmentid=1237]

    New layer, di chuyển BF lên hẳn trên cùng, di chuyển NH lên giữa rồi lại vào tween để add frame. Set delay

    new layer, di chuyển NH lên gần trên, BF để nguyên. Add frame, set delay.

    new layer, di chuyển BF từ trên xuống khuất sau đường biên dưới. ko add frame, ko set delay

    new layer, di chuyển NH ra khuất biên trên, di chuyển BF lên giữa.add frame, set delay.

    Đến đây mọi việc đã hoàn thành 99%. 1% còn lại là check xem delay đã hợp lý hay chưa thôi. Nếu làm đúng thao tác, khi play ta sẽ dc kết quả như sau.

    [attachmentid=1238]

    Khi đã ưng ý thì save file psd lại để dành.
    Muốn save dưới dạng gif thì chọn save optimized as ... là dc.

    -----------
    Vậy là xong, ai thik 3 dòng text thì cứ làm tương tự, dễ òm ^^. Ai ko làm dc cứ post lên hỏi ha/
     
  4. Thamiel

    Thamiel 凸(  ̄ー ̄)=◯)`ν°) Staff Member

    hỏi cái này hơi lạc đề tí, anh biết làm hiệu ứng giấy mục nát ko?
     

Chia sẻ trang này