Specctr, plugin ghi chú miễn phí cho Adobe illustrator

Bạn đã gặp tình trạng khi gửi files cho một nhóm lập trình và sau vài tuần khi bạn nhận được một sản phẩm có gì đó không giống như bản gốc bạn đưa?

Rất nhiều nhà thiết kế và các nhóm thiết kế nghĩ rằng họ chỉ cần giao một sản phẩm hoàn thiện là họ đã hoàn thành công việc của mình trong khâu hình ảnh.

Một thiết kế hoàn chỉnh cần nhiều hơn một bản vẽ được trình bày trên vùng làm việc của illustrator, fireworks hay Photoshop; Nó cần được hoàn thiện chức năng "Chức năng hướng dẫn" đó là một nguyên tắc nổi tiếng, được đưa ra năm 1896 bởi Louis Sullivan – một kiến trúc sư.

Các trang web sẽ làm việc thế nào? Các phần sẽ được hiển thị tương tác ra sao? Điều gì xảy ra khi bạn rê chuột qua nút này? Chức năng chính của Menu là gì?

Những người thiết kế biết rằng các chi tiết sẽ tạo nên hoặc phá vỡ khả năng sử dụng (usability). Nhưng họ cũng có trách nhiệm khi để các chi tiết đó bị bỏ sót trong quá trình thành phẩm.

5 Pixel là cả một vấn đề! Những người lập trình hoặc nhóm làm sản phẩm cần hiểu sản phẩm làm việc ra sao và nó sẽ nhìn thế nào trong các trường hợp khi sản phẩm được sử dụng.

Ghi chúmọi trường hợp là một công việc chán ngắt, nhưng Specctr có thể giúp bạn giảm nhẹ phần việc này.

Specctr là một plugin cho phần mềm Adobe (hiện tại nó sẵn có Fireworks, illustrator và Photoshop). Specctr giúp bạn chuyển một thiết kế giao diện sang một sản phẩm khi cho phép bạn hiển thị thông số không gian, chiều rộng, chiều cao, màu sắc, fonts…. và cả các tính năng (hover, transittion, user flows…).

Nó tự động tính toán các phép đo và tạo một hướng dẫn (blueprint ) cho thiết kế, giúp bạn tiết kiệm thời gian.

Lưu ý: Specctr Plugin cho Adobe Illustrator có hai phiên bản. Lite và Pro. Lite thì miễn phí nhưng có giới hạn về tính năng, còn Pro thì tất nhiên là đầy đủ tính năng mạnh mẽ nhất, bạn có thể tuỳ chỉnh "spec otions", có cả option cho mode màu (RGB,CMYK, HSL, HSB)…

ai-specctr-lite-preview-500px

Yêu cầu và Cài đặt

  • Specctr có thể dùng cho Mac và Win. Các phiên bản AI Cs5, 5.1, 6 hoặc CC (Creative Clound version).
  • Download Specctr. Nhấp chuột vào "install". Restart Illustrator. Trong Illustrator, đi tới WIndow > Extensions > Specctr

Lưu ý: nếu bạn dùng Win Vista+, bạn có thể cần chạy Adobe Extension Manager với quyền Admin.

Hướng dẫn nhanh

  • Thêm setting trong "Spec Options" tab
  • Chọn Option bạn muốn hiển thị
  • Chọn phần bạn muốn hiển thị thông số kỹ thuật.
  • Spec

Cách làm việc của Lite và Pro khá đơn giản, chỉ khác nhau về chức năng giữa hai phiên bản.

Làm việc với thiết kế Web

example-website-specctr-ai-02

Có rất rất nhiều lý do để bạn sử dụng illustrator để thiết kế web. Chúng tôi sẽ đăng một bài sưu tập trong thời gian gần nhất để nói những điểm tuyệt vời khi bạn sử dụng illustrator với web.

Một chút gợi ý cho việc bắt đầu thiết kế Web với Illustrator là setting khi tạo new:

web-settings-3

Branding Guideline

Hướng dẫn nhận diện thương hiệu là bộ mặt của một công ty. Một cuốn nhận diện thương hiệu cung cấp logo, màu sắc, chất liệu, hình ảnh, kiểu dáng, tông màu…

Việc sử dụng Specctr cũng giúp bạn tiết kiệm thời gian phần nào khi làm những việc này.

Dưới đây là một số ví dụ về Brand Guidline:

Tính năng sắp có

  • Một số tính năng mà Specctr sẽ cung cấp sắp tới
  • CSS exporting
  • Relative Spacint
  • Nhiều option cho iOS và Android design specs.

Bạn có thể đóng góp để hoàn thiện Specctr tại đây.

Cùng tác giả

#Tag

Hướng dẫn

iDesign Must-try

Top 10 công cụ online hữu ích dành cho dân thiết kế
Top 10 công cụ online hữu ích dành cho dân thiết kế
Trong bài viết này, iDesign sẽ chia sẻ đến các bạn những công cụ trực tuyến hữu ích trong việc thiết kế đồ họa & thiết kế web. 1. Gingersauce:  Tạo…
Nguồn gốc của phong cách Memphis và cách ứng dụng vào thiết kế của bạn
Nguồn gốc của phong cách Memphis và cách ứng dụng vào thiết kế của bạn
Nếu yêu thích kiểu gam màu và các chi tiết gãy gọn và đậm đà, bạn sẽ rất vui khi biết được rằng phong cách Memphis, một phong cách thiết…
Tính năng đổi cảnh bầu trời Sky Replacement cực xịn xò của Photoshop
Tính năng đổi cảnh bầu trời Sky Replacement cực xịn xò của Photoshop
Sky Replacement là tính năng mới của Photoshop vô cùng hữu ích, hỗ trợ người dùng tách mây, thay đổi nền trời chỉ với một cú nhấp chuột.
Vận dụng Opentype để khai phá sức mạnh con chữ (Phần 2)
Vận dụng Opentype để khai phá sức mạnh con chữ (Phần 2)
Số là một yếu tố cực kỳ quan trọng trong việc soạn thảo văn bản cũng như thiết kế. Nó được sử dụng trong rất nhiều lĩnh vực và hầu…
Làm thế nào để tổ chức tập tin thiết kế gọn gàng và ngăn nắp?
Làm thế nào để tổ chức tập tin thiết kế gọn gàng và ngăn nắp?
Hệ thống tổ chức mà tôi mô tả dưới đây không hoàn hảo và sẽ không giải quyết tất cả mọi vấn đề, tuy nhiên nó sẽ là điểm bắt…
Video hướng dẫn vẽ miễn phí cho tụi nhóc bị ‘kẹt ở nhà’ - từ anh họa sĩ trẻ vui tánh
Video hướng dẫn vẽ miễn phí cho tụi nhóc bị ‘kẹt ở nhà’ - từ anh họa sĩ trẻ vui tánh
Suốt mấy tháng dịch, trường học không hoạt động, thứ khiến nhiều bậc cha mẹ đau đầu nhất vẫn là câu hỏi: Làm gì để tụi nhỏ không buồn chán…