Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Giới thiệu Avocode - PSD đến Code không dùng Photoshop

by
Length:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Photoshop đã là một phần của thiết kế web qua nhiều năm, và có thể sẽ vẫn như vậy trong một thời gian dài. Nếu bạn thiết kế web bằng Photoshop hoặc bạn là nhà phát triển đảm nhiệm việc viết mã cho PSD, bạn có thể thường xuyên gặp phải một số vấn đề.

Ngay cả khi bạn đã chuyển từ Photoshop sang Sketch cho giai đoạn thiết kế trong quy trình làm việc của bạn, thì bạn vẫn sẽ phải đối mặt với vấn đề lập trình viên cần truy xuất vào phần mềm mà họ không sử dụng. Với một trong hai chương trình, có thể bạn sẽ gặp trở ngại khi sử dụng những công cụ với item đích chủ yếu là thiết kế, không phải tạo code cho web.

Do Source tạo ra

Những người ở Source đang sản xuất các extension cho Photoshop từ năm 2012. Họ thiết kế plugin để giảm thiểu một số vấn đề phổ biến nhất trong quá trình thiết kế đến code, chẳng hạn như tạo CSS thể hiện chính xác thiết kế và xuất hình ảnh một cách hiệu quả.

Tôi đã là một fan hâm mộ khá lâu của plugin CSSHat của họ, nó tạo code cho CSS từ các layer của photoshop. Tôi cũng sử dụng plugin PNGHat của họ hầu như mỗi khi tôi sử dụng Photoshop, để xuất hình ảnh sang PNG, JPEG hoặc Base64. Bạn có thể thấy xem thực hành của cả hai plugin này trong hướng dẫn gồm hai phần của tôi:

Các plugin này tập trung vào giai đoạn phát triển của quá trình tạo website; chuyển PSD thành các website đầy đủ chức năng. Nhiều nhà phát triển thâm chí không có thêm item đích nào khác để sử dụng Photoshop; đó la bước tự nhiên tiếp theo để xem kiểu cải thiện quy trình công việc này được lấy ra khỏi Photoshop.

Đó là tất cả về Avocode, công cụ trên nền web và desktop đến từ Source.

Avocode là một chương trình được xây dựng dành cho quá trình chuyển từ PSD (hoặc Sketch) sang code. Nó không tự động tạo website cho bạn, thay vào đó nó cung cấp cho bạn một nhóm công cụ cho phép bạn tạo các website theo cách bạn thích, nhưng hiệu quả hơn khi làm việc trực tiếp bên trong Photoshop hoặc Sketch. Avocode giúp thu hẹp khoảng cách giữa các giai đoạn thiết kế và code của việc phát triển web.

Tiếp theo

Trong bài viết này, chúng ta sẽ xem xét cách bạn có thể sử Avocode để:

  • Mở PSD để code mà không dùng Photoshop và không cần email hoặc tải các file lên.
  • Chọn layer, group và di chuyển trong thiết kế.
  • Tạo mã CSS hoặc preprocessor cho các thành phần trong thiết kế của bạn.
  • Lấy các kích thước chính xác để dựng bố cục của bạn.
  • Copy nội dung văn bản để chèn vào code.
  • Trích xuất bảng màu và hexcode từ PSD.
  • Xuất hình ảnh, thậm chí từ nhiều layer, mà không cần trải qua quá trình slicing (cắt hình).

Mở PSD mà không cần Photoshop

Với Avocode, các nhà thiết kế và nhà phát triển có thể chia sẻ PSD thông qua quá trình đồng bộ hóa tự động. Nếu bạn là nhà thiết kế, bạn sẽ cài đặt plugin Photoshop và khi thiết kế của bạn sẵn sàng, bạn sẽ chỉ cần nhấn nút “Sync now” để khả dụng hoá PSD của bạn cho nhà phát triển.

Một số cách khác để đồng bộ, bằng Dropbox là một chọn lựa đang được phát triển trong bản phát hành trong tương lai. Đánh giá bởi giao diện beta 0.5.0 hiện tại, chúng tôi cũng có thể thấy việc đồng bộ hóa thông qua Layervault, tải lên trực tiếp và lấy file trực tiếp từ bộ nhớ cục bộ.

Nếu bạn là nhà phát triển, bạn sẽ nhận được thông báo thông qua Avocode rằng thiết kế mới đã sẵn sàng, tại thời điểm này bạn có thể mở nó trực tiếp thông qua một click chuột duy nhất trong bảng điều khiển duyệt PSD. Điều này loại bỏ nhu cầu gửi email các file đính kèm lớn hoặc bằng cách thủ công khác để chuyển các file PSD.

Mỗi thiết kế có một hệ thống quản lý phiên bản được xây dựng sẵn. Lặp đi lặp lại tiến bộ của một PSD có thể dễ dàng được đồng bộ hóa giữa nhà thiết kế và nhà phát triển, lần nữa bằng cách nhấn nút Sync now, với mỗi phiên bản có thể truy cập thông qua bảng duyệt PSD. Avocode nhớ thiết lập export trước đó của hình ảnh trong thiết kế, nghĩa là các tác vụ như xuất hình ảnh mới được cập nhật có thể được tự động hóa.

Chọn và điều hướng

Sau khi bạn mở PSD trong mã Avocode, bạn sẽ thấy việc tương tác với nó khá trực quan. Giống như Photoshop, Avocode có Layers Panel để  bạn có thể xem tất cả các layer và group của PSD. Tất cả các layer và nhóm này đều có thể được hiển thị hoặc ẩn và bạn cũng có thể click để chọn bất kỳ layer nào trong số đó.

Giống như việc chọn các yếu tố của thiết kế thông qua Layers Panel, bạn có thể chọn Select Tool từ bảng công cụ ở bên trái, sau đó click vào item bất kỳ trên stage một cách trực tiếp. Để chọn nhiều item, chỉ cần giữ phím SHIFT và tiếp tục click vào các item bạn muốn chọn.

Chọn nhiều công trình cho dù click vào trực tiếp trên stage hoặc trong Layers Panel

Để di chuyển quanh thiết kế, chọn Hand Tool rồi click và kéo để di chuyển.

Tạo mã CSS và preprocessor

Với bất kỳ layer nào được chọn và Inspection Panel đang mở, bạn sẽ thấy CSS cho item đó xuất hiện trong bảng phụ Code của bảng điều khiển, ở dạng chưa chỉnh sửa hoặc preprocessor tùy vào chọn lựa của bạn. Điều này áp dụng cùng logic tạo CSS như plugin CSSHat, vẫn là trình tạo CSS chính xác nhất mà tôi đã thấy trong số các chọn lựa hiện có.

Việc lấy CSS cho item này dễ dàng bằng việc click vào nút Copy CSS hoặc Copy LESS, vì vậy bạn có thể dán vào stylesheet hoặc trực tiếp đánh dấu các dòng bạn muốn sử dụng và sao chép chúng từ đó. Nếu bạn đang có mã preprocessor đã tạo, nó sẽ tự động kèm thêm các mixin từ thư viện mixin ưa thích của bạn. Các tùy chọn hiện có sẵn là:

  • LESS + LESSHat
  • Sass + Compass
  • SCSS + Compass
  • Sass + Bourbon
  • SCSS + Bourbon
  • Stylus + Nib

Lấy các thức đo chính xác cho bố cục

Chắc chắn không chỉ mình tôi thấy khó khăn khi làm việc với bố cục bên trong Photoshop. Cách tiếp cận của Avocode cho vấn đề này rất trực tiếp. Để có chiều cao và chiều rộng của một item:

1. Chọn Selection Tool và chọn item bất kỳ hoặc nhiều item cùng lúc.

2. Đọc các giá trị ở góc dưới cùng bên trái của box chọn lựa màu xanh được đánh dấu.

3. Hoặc, đọc các giá trị ở bên phải của preview thumb ở trên cùng của Inspection Panel.

Để tìm khoảng cách chiều ngang và chiều dọc theo pixel giữa hai item:

1. Chọn Measure Tool và chọn item bất kỳ.

2. Di chuột qua item bất kỳ khác và đọc các giá trị bên kết bênh các đường thẳng màu đỏ chiều dọc và chiều ngang.

Copy nội dung văn bản

Nếu bạn đã chọn một text layer, bạn sẽ thấy bản preview được rút ngắn của nội dung trong Inspection Panel, cũng như chiều rộng và chiều cao và nút Copy text bạn có thể sử dụng để lấy văn bản trong đó để dán vào mã của bạn.

Tạo Color Palette (bảng màu)

1. Chọn Color Picker Tool và di chuyển chuột quanh vùng hiển thị, xem preview cho màu đến khi có được màu sắc bạn muốn.

2. Nhấp vào vị trí đó và màu của bạn sẽ được thêm vào phần phụ Colors trong Inspection Panel, với các hexcodes được hiển thị cho mỗi màu.

Xuất ảnh

1. Chọn Selection Tool và chọn item bất kỳ hoặc nhiều item cùng lúc.

2. Trong Inspection Panel bên dưới bảng phụ Export, click vào biểu tượng file nhỏ có dấu cộng màu xanh dương trên đó để thiết lập chọn lựa của bạn thành một asset.

3. Tên của asset của bạn sẽ được đặt theo tên layer. Chọn xuất PNG, JPEG hoặc SVG, sau đó click vào “Export now”. Nếu đó là lần xuất asset đầu tiên trong dự án, bạn sẽ có thể chọn một thư item đích, nếu không file sẽ được xuất ngay tức thì.

Sau khi bạn đã có lựa chọn của mình làm asset, nó cũng sẽ xuất hiện trong assets panel. Từ đây, bạn có thể click vào biểu tượng kính lúp để đi đến thư item lưu trữ asset đã xuất của bạn.

Bạn cũng có thể click vào nút "Get Code" ở đầu bảng điều khiển hoặc biểu tượng <> ở bên phải tên của asset, để tạo ra HTML, CSS hoặc LESS mà bạn có thể sử dụng để đặt asset trong code.

Trong plugin PNGHat cho Photoshop, cũng có thể kiểm soát các cài đặt xuất JPEG và PNG chính xác cũng như các tùy chọn chia tỷ lệ, vì vậy tôi tưởng tượng chúng ta sẽ thấy các điều khiển tương tự này sớm được chuyển sang mã Avocode.

Để có ý tưởng về những điều tham gia vào trong quy trình xuất ảnh của Avocode, hãy đọc thêm về PNGHat tại đây: How to Export Photoshop Assets For the Web with PNGHat.

Tính năng bổ sung đang phát triển

Ngay bây giờ Avocode là bản private beta nên vẫn còn một số tính năng tìm kiếm rất thú vị sắp ra mắt trong tương lai gần. Ứng dụng này được lên kế hoạch chuyển thành phiên bản public beta vào một thời điểm nào đó trong mùa hè này, sau đó chúng ta sẽ thấy bản phát hành chính thức.

Khi việc phát triển đang tiến hành, đây là một vài điều chúng ta có thể dự đoán:

Hỗ trợ đa nền tảng và hỗ trợ dựa đầy đủ trên nền web.

Dù bạn đang làm việc với hệ điều hành nào hoặc thậm chí bạn dùng thiết bị di đông, thì bạn vẫn có thể dùng Avocode. Hiện tại phiên bản close beta của Avocode đang được thử nghiệm qua các bước trên Mac, nhưng bản phát hành native của ứng dụng gốc cũng sẽ chạy trên Windows và Linux và phiên bản web sẽ chạy trên bất kỳ trình duyệt hiện đại nào.

Sử dụng với thiết kế từ nền Sketch

Source cho biết họ đã có một bản prototype đang hoạt động nhằm cung cấp tất cả các chức năng tương tự cho các thiết kế dựa trên Sketch. Vì vậy, nếu bạn là một nhà thiết kế sử dụng Sketch trên Mac, một nhà thiết kế sử dụng Photoshop trên Windows, một nhà phát triển viết code trên Linux hoặc nếu bạn đang sử dụng bất kỳ nhóm kết hợp nào khác, thì bạn sẽ sẵn lòng sử dụng.

Atom Code Editor bên trong Avocode

Avocode thực sự được xây dựng trên nền tảng của Atom Code Editor được sản xuất bởi GitHub. Điều thực sự thú vị là sẽ có một trình soạn thảo code đầy đủ, mạnh mẽ và giàu tính năng, có sẵn ngay bên trong Avocode trong bản phát hành public của nó. Có thể xử lý toàn bộ quá trình code ngay bên trong một ứng dụng duy nhất thực sự hoàn tất những gì đã được hình thành như một nhóm tính năng mạnh mẽ.

Biến số cho màu sắc

Cũng như có thể lấy hexcode cho các màu được thêm vào bảng màu của bạn, bạn cũng có thể gán tên biến cho mỗi màu để sử dụng trong mã preprocessor của bạn.

FTP dựng sẵn và CDN Upload

Cũng như nhiều chức năng khác đang phát triển cho Avocode, khả năng tải trực tiếp lên CDN đã có trong một trong các plugin của Source, PNGHat, vì vậy chúng tôi có thể đoán rằng chức năng sẽ giống nhau. Hình ảnh có thể được xuất cục bộ thông qua Avocode, hoặc bạn sẽ có thể đưa chúng trực tiếp vào CDN và bổ sung vào vị trí của file trong CSS của bạn. Bạn cũng sẽ có tùy chọn để FTP hình ảnh trực tiếp đến server của bạn khi xuất.

Kết nối với TypeKit và Google Fonts

Các video giới thiệu cho Avocode đề cập sẽ có một tùy chọn để tích hợp với TypeKit và Google Fonts khi tạo code để cài đặt phông chữ của bạn. Điều này chưa có trong phiên bản close beta hoặc bất kỳ plugin nào của Source nên tôi không chắc chắn chính xác cách thức này sẽ hoạt động ra sao, nhưng cá nhân tôi hy vọng nó sẽ hợp lý hóa quá trình tập hợp các URL và code thích hợp để gọi các font khác nhau.

Xuất Base64 và Sprite Sheet

Giai đoạn đầu tiên của quá trình xuất ảnh trong phiên bản beta hiện tại của Avocode gồm có JPEG, PNG và SVG. Tuy nhiên Source đã có một quá trình được thiết lập cho việc tạo ra Base64 thông qua plugin PNGHat cho Photoshop, vì vậy tôi hy vọng chúng ta sẽ thấy chúng vẽ từ cơ sở code đó để đưa nó vào mã Avocode. Họ cũng có ý định hỗ trợ sản xuất các sprite sheet cùng với CSS được yêu cầu.

Xuất code cho iOS

Trọng tâm của Avocode sẽ là web cho đến khi nó hoàn thiện đầy đủ, tuy nhiên cũng có kế hoạch đang được thực hiện để cho phép Avocode tham gia thành một phần của phát triển iOS.

Source đã có một plugin được gọi là iOSHat hoạt động trong Photoshop để tạo ra code Objective-C hoặc Swift từ các layer Photoshop để dùng trong việc phát triển iOS. Có khả năng hỗ trợ xuất code iOS trong Avocode sẽ hoạt động theo cùng một cách.

Package cho tiện ích mở rộng tùy chỉnh

Có một item menu hấp dẫn trong Avocode; một gợi ý về khả năng mở rộng của nền tảng trong tương lai, với một số package ban đầu đã có tại chỗ:

Source cho biết họ được truyền cảm hứng từ việc phát hành Atom để áp dụng một phương pháp tương tự cho phép “Package” tùy chỉnh được tạo ra và chia sẻ trong cộng đồng. Chúng ta có thể mong đợi nhìn thấy con đường này mở ra khi sự phát triển tiến triển.

Đặt hàng trước để có suất giảm giá 70%

Hiện tại, Source đang dần triển khai các tính năng và hoạt động trong phản hồi của người dùng beta khi họ tiếp tục phát triển. Khi phần mềm được phát hành công khai, nó sẽ có sẵn thông qua một mô hình trả phí định kỳ với giá $240 hàng năm.

Tuy nhiên, nếu bạn đặt trước sớm, bạn sẽ được mua với giá đã giảm 70% trọn đời, làm cho giá giảm xuống còn $69 mỗi năm. Bạn cũng sẽ có quyền truy xuất vào bản private beta và trong thời gian này, bạn sẽ có thể sử dụng phần mềm miễn phí. Phần đăng ký của bạn chỉ bắt đầu khi Avocode phát hành công khai.

Các vị trí được đặt trước có hạn và tại thời điểm này, có ít hơn 230 địa điểm có sẵn. Đặt trước tại: http://avocode.com/preorder.html

Liên kết hữu ích

Để biết thêm thông tin, hãy truy cập:

Tổng kết

Tôi sẽ hoàn toàn dành phần quyết định cho bạn! Bạn nghĩ sao, bạn có bất ngờ với bất kỳ tính năng nào mà Source đã công bố không? Avocode có trở thành một phần trong quy trình làm việc của bạn trong tương lai? Hãy cho chúng tôi biết trong phần bình luận!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.