Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

    Tự thiết kế theme cho FireFox

    Yoraime
    Yoraime
    Cổ vong


    Thần lực hệ : Phong
    Tổng số bài gửi : 116
    TFL : 1553
    Join date : 30/10/2009
    Đến từ : Không khí

    Tự thiết kế theme cho FireFox Empty Tự thiết kế theme cho FireFox

    Bài gửi by Yoraime Tue Nov 03, 2009 12:48 pm

    Phần 1. Ý tưởng thiết kế giao diện

    như đã nói trên, trình duyệt hay HĐH thì đều có giao diện mang một cấu
    trúc, một hệ thống riêng (vd IE với firefox thì tab nằm dưới, sử dụng
    mẫu các button, check box từ windows... còn Safari với Opera thì có các
    button và checkbox riêng...) nhưng tất cả đều có vài điểm chung

    Thứ nhất:
    thay đổi giao diện ko khó như bạn nghĩ và cũng ko vi phạm bản quyền hay
    dính j` tới pháp luật cả. (ở đây ko xét Safari bởi vì thay đổi giao
    diện Safari 3.0 rất khó, dính nhiều tới code và theo mong muốn của
    apple là ko muốn bị thay đổi). Ko cần một kĩ năng lập trình, bạn hoàn
    toàn có thể thay đổi giao diện của bất kì phần mềm nào nói chung, kể cả
    HĐH, và ở đây là trình duyệt nói riêng

    Thứ hai. Giao
    diện của một chương trình được lưu trữ riêng với file exe. Với Chrome
    thì đó là một file dll. Với Firefox thì lại file nén... Vì thế, chúng
    ta chỉ cần thay đổi file riêng lẻ đó, ko đá động gì tới file exe chính.

    Thông thường, cách thay đổi giao diện thường là dựa trên những mẫu giao
    diện, từ đó thiết kế lên. Cái cách làm là trích xuất những hình ảnh,
    thông số của kiểu theme mặc định của phần mềm, sau đó dùng Photoshop
    hay cái j` đó chỉnh sửa những hình ảnh, rồi đưa vào file dll gốc lại.
    Cái ý tưởng là vậy. Trích hình từ file gốc ~> chỉnh sửa ~> đưa lại vào file gốc.

    Vậy, cả phần 1 này, bạn chỉ cần nắm một cái: thiết kế theme cho phần mềm là xây dựng một theme mới từ những hình ảnh có sẵn

    ====================================

    Phần 2. Cách thiết kế giao diện trên một phần mềm cụ thể

    Sau khi nắm được cái ý tưởng thiết kế theme, bi giờ cái mục đích của
    chúng ta là tìm kiếm những file gốc để trích hình như đã nói trên.
    Những file này thay đổi tùy theo từng phần mềm. Đó là lí do có phần 2
    này. Phần 2 này sẽ giúp bạn thay đổi theme với một phần mềm cụ thể. Cụ
    thể ở đây được đề cập là Firefox, IE và Chrome. Bên cạnh đó, cuối bài
    viết mình cũng sẽ nói sơ về việc thiết kế các phần mềm khác như WinRAR
    hay iTunes

    1. Thiết kế giao diện Firefox

    Nếu như dùng Firefox lâu và hay đổi skin, bạn đã biết là firefox sử
    dụng các file chứa skin là .jar. Công việc đổi skin là mở cửa sổ add-on
    lên và kéo file .jar chứa skin vào.

    Vậy để chỉnh sửa giao diện firefox, chúng ta sẽ chỉnh sửa file .jar này.

    Trong file .jar này là cái j`, thật chất, đây là một dạng file nén ZIP
    nhưng được đổi định dạng thành .jar. Trong file nén này chứa các hình
    ảnh của skin và các file text chứa các thông số...

    Bây giờ,
    nói mãi cũng chán, chúng ta sẽ thực hành. Như hồi nãy đã nói trên,
    chúng ta thiết kế skin từ một cái mẫu. Vì vậy, bạn download file .jar
    sau về để thực hành trên nó. Đây là cái skin của Firefox 3.7 for 3.5
    (mình làm Tự thiết kế theme cho FireFox 4). Nếu bạn ko thích có thể lên mạng (DeviantArt) để tìm một cái skin .jar phù hợp


    http://www.mediafire.com/?juzz1zybzz4
    (tổng dung lượng 1MB Tự thiết kế theme cho FireFox 4 file skin của firefox rất nhẹ dù chứa cả trăm hình)

    Sau khi down về, có file Dvkndn.jar, giải nén bằng WinRAR vào một thư mục nào đó
    Đây là hình ảnh bên trong thư mục vừa giải nén xong

    Tự thiết kế theme cho FireFox Screenshot99

    Đầu tiên, chúng ta sẽ lưu dấu ấn cá nhân tại 2 file Contents và install.rdf

    Bạn mở file install.rdf bằng notepad, chú ý và thay đổi các thông tin sau

    Tự thiết kế theme cho FireFox Untitled1

    tương tự cũng làm thế với file Contents.rdf

    Dù bạn thay đổi thế nào, cần phải có tên tác giả gốc trong cái skin đó vì bạn thiết kế từ skin của họ lên.

    Sau khi đã có vài dấu ấn cá nhân, công việc tiếp theo của bạn chỉ là thay đổi hình ảnh trong đó mà thôi.

    Thay đổi như thế nào? Mở lên bằng Photoshop và chỉnh sửa, xong lưu đè lại

    Vd bạn muốn sửa nút back, vào Browser và chỉnh sửa file back-forward.png

    Còn muốn chỉnh sửa chỗ khác, xin thưa, chỉ có một cách là mò riết mới
    quen. Ví dụ bạn muốn đổi biểu tượng stop thì đi tìm hình nào có biểu
    tượng đó mà sửa. Nếu bạn không biết hình đó thể hiện biểu tượng nào thì
    cứ sửa, xong lưu lại và áp dụng sẽ thấy

    Ở bài viết này, mình
    chỉ đề cập đến mức độ sửa hình ảnh và file text, như thế đã đủ một skin
    Pờ rồ rồi, nếu muốn cao hơn nữa thì bạn chỉ việc mở các file css và sửa
    tiếp

    Sau khi sửa xong, bạn trở lại thư mục ban đầu, chọn tất
    cả các file và thư mục (chứ ko chọn thư mục chứa tất cả file đó) và nén
    lại thành file ZIP

    Tự thiết kế theme cho FireFox Screenshot100

    Tự thiết kế theme cho FireFox Screenshot101

    Sau đó đổi tên file .zip thành file .jar (để hiển thị phần mở rộng, vào
    folder Option và bỏ dấu tick chỗ Hide Extension for Know file Types

    Tự thiết kế theme cho FireFox Screenshot102

    Vậy là bạn đã có một skin cho Firefox rồi đó, công việc tiếp theo là kéo vào cửa sổ Addon và chia sẽ cho bạn bè
    http://windowsvn.net
    *Link dowload theme trên hiện đã die =.=
    Yoraime
    Yoraime
    Cổ vong


    Thần lực hệ : Phong
    Tổng số bài gửi : 116
    TFL : 1553
    Join date : 30/10/2009
    Đến từ : Không khí

    Tự thiết kế theme cho FireFox Empty Re: Tự thiết kế theme cho FireFox

    Bài gửi by Yoraime Tue Nov 03, 2009 12:52 pm

    Nhìn chung thì cách hướng dẫn trên vẫn chưa cụ thể lắm. Khó có thể thực hiện được, nhất vẫn là phần design bằng Photoshop. Vì thế, nếu có designer nào muốn tạo một theme firefox cho riêng TFL thì hãy thử đi nhé ^^

      Hôm nay: Mon Nov 25, 2024 2:56 am