Vì là một người mới bắt đầu, việc tạo ra tác phẩm nghệ thuật kỹ thuật số dành cho sử dụng web đôi khi có thể gặp một chút trục trặc, đặc biệt là khi bạn đặt rất nhiều thời gian vào một phần (có thể là một hình minh hoạ, hoặc một biểu tượng), và sau đó bạn đột nhiên nhận ra rằng vì một số lý do nên kết quả cuối cùng đã không hiện ra tất cả các đường nét đó.
Đây là những gì mà tất cả chúng ta cần phải xử lý khi chúng ta bắt đầu sử dụng Adobe Illustrator, vì vậy tôi quyết định tạo ra bài viết ngắn này để giúp bạn nếu bạn đang tìm cách để giải quyết vấn đề này.
1. Vector và Bitmap
Trước khi chúng ta bắt đầu, tôi cũng muốn làm rõ một số tiêu chuẩn khác nhau mà bạn, tôi và tất cả mọi người đang làm việc như một nhà thiết kế cần phải nhận thức được khi chúng ta <assume this line of work>.
Có hai loại hình ảnh chính thường sử dụng của một người làm việc sáng tạo. Một là Vector và loại còn lại là Bitmap.
Một hình Vector được tạo ra bởi một hoặc nhiều đối tượng tạo thành một số lượng các điểm neo và đường path, mà hầu như có thể mở rộng cho bất kỳ mức độ nào mà người dùng muốn hoặc cần, một quá trình thực hiện mà không bị mất đi chất lượng.
Mặt khác, một hình Bitmap được tạo bởi một loạt các điểm ảnh (pixel) cá thể cố định được đồng chỉnh với một lưới, có nghĩa là một bức ảnh được sử dụng hoặc tạo ra với một độ phân giải nhất định, nó sẽ bị mất chất lượng nếu kích thước của nó được thay đổi dưới bất kỳ hình thức nào (được tăng hoặc giảm tỷ lệ). Điều này xảy ra khi lượng thông tin điểm ảnh (số lượng thực tế của các điểm ảnh) bị giảm hoặc phóng to nhiều, vì một số dự án sẽ yêu cầu các kích thước khác nhau cho các mục đích sử dụng khác nhau.
Mặc dù giảm kích thước của một hình ảnh sẽ không ảnh hưởng mạnh đến chất lượng của nó, nhưng phóng to thì hầu hết đều có chất lượng tập tin hình ảnh bị mờ, răng cưa. Có một số chương trình, ví dụ như Perfect Resize sử dụng các thuật toán đặc biệt để tối ưu hóa độ rõ nét và mức độ chi tiết cho các hình ảnh cần được phóng to, nhưng đối với tôi, điều này nhấn mạnh sâu sắc hơn về sự thiếu thốn của một thuộc tính quan trọng khi so sánh Bitmap với Vector: Khả năng mở rộng có chất lượng không đoán trước được.
Cả hai Vector và Bitmap đều phụ thuộc vào môi trường mà chúng được sử dụng. Như bạn có thể đã biết, một tập tin có thể được hiển thị bằng kỹ thuật số hoặc được in ra, sự khác biệt chính là cách mà hình ảnh đó được sao chép lại. Trong khi các máy in là các pixel không đoán trước được, thì màn hình kỹ thuật số, (màn hình máy tính, màn hình điện thoại và máy tính bảng, v.v ...) đều dựa vào độ phân giải để tạo và xuất bất kỳ loại hình ảnh nào, cho dù đó là tập tin Bitmap hay Vector.
Do đó, sự phân chia giữa bản vẽ pixel perfect (điểm ảnh hoàn hảo) và những bản vẽ theo kiểu hay thay đổi đặt ra một vấn đề khó khăn khi những hình ảnh Vector liên hệ với lưới pixel khi mà chúng được bố trí.
May mắn thay, có những giải pháp mà theo tôi nghĩ nên trở thành các quy tắc tiêu chuẩn để sử dụng khi bạn bắt đầu làm việc trên bất kỳ dự án nào, cho dù nó được thiết kế để được đưa trên web hoặc để in ra.
2. Hiểu Cách hoạt động của Adobe Illustrator
Trước khi bạn bắt đầu sửa một cái gì đó, trước tiên bạn cần phải hiểu cách thức "điều đó" hoạt động. Illustrator là một phần của phần mềm dựa trên vector sử dụng các thuật toán toán học để tạo và hiển thị các đường path (cho dù chúng được đóng hoặc mở) mà chúng ta thấy bằng cách sử dụng các điểm neo. Những điểm neo này là các điểm đơn giản mà bạn có thể thao tác để thay đổi kích thước và hình dạng của một đối tượng.
Bản thân các điểm neo không phải là tất cả những điều quan trọng, trừ khi bạn sắp xếp chúng và đối tượng mà chúng tạo ra trên Artboard của bạn (bám (snap) hay không bám), và đó là lý do tại sao trong các bước sau tôi sẽ nói về tất cả những điều nho nhỏ, giúp chúng ta tạo ra tác phẩm có các pixel sắc nét.
3. Điều chỉnh cài đặt của Illustrator
Theo mặc định, Illustrator đi kèm với một loạt các tùy chọn và cài đặt, hầu hết được xác định trước, để bạn có thể bắt đầu làm việc ngay khi bạn cài đặt nó trên máy. Đối với hầu hết mọi người, việc làm này trở nên tốt hơn, nhưng khi quy trình công việc của bạn trở nên chi tiết hơn, bạn sẽ thấy rằng bạn cần phải điều chỉnh một số trong số các thiết lập trước đo để có được thiết kế như ý. Trong các bước sau, tôi sẽ giới thiệu cho bạn một số điều cơ bản mà tôi muốn điều chỉnh mỗi khi tôi có một cài đặt Illustrator mới.
Trước khi bắt đầu, tôi muốn chỉ ra rằng đây là thuộc về sự ưa thích cá nhân được phát triển thông qua một quá trình thử nghiệm và sai sót, và tôi sẽ không nói chúng là "hoàn hảo" hoặc "chính xác" - nó thiên về "thích hợp" cho dự án thực hiện theo kiểu pixel-perfect. Không có trường hợp nào phù hợp với cùng một mô hình, nhưng hầu hết thời gian sẽ cho bạn các giải pháp đáng tin cậy để điều chỉnh và làm cho phù hợp với quy trình công việc của bạn.
Bước 1
Trước khi chúng tai bắt đầu điều chỉnh các đơn vị, tôi muốn dùng một chút thời gian và so sánh giá trị mặc định mà Illustrator sử dụng (point) để tinh chỉnh giá trị mà chúng ta sẽ chọn (pixel) để xem sự khác biệt.
Point: Về khía cạnh typographic, một point (pt) là đơn vị nhỏ nhất được sử dụng để đo kích thước phông chữ, cách quãng, thụt lề, và khoảng trống trước một đoạn văn.
Pixel: Theo Wikipedia, từ quan khía cạnh hình ảnh số, một pixel (px) là "yếu tố nhỏ nhất định địa chỉ được" của một hình ảnh hiển thị trên một màn hình kỹ thuật số. Khi các màn hình và các màn hình thiết bị khác hiển thị hình ảnh, chúng ta cũng có thể xác định một pixel như là đơn vị đo lường cơ bản bằng cách xác định độ phân giải của thiết bị và kích thước của các yếu tố được hiển thị trên nó.
Vì vậy, chúng ta có hai đơn vị, nhưng chúng khác nhau như thế nào? Nhiều bài viết nói rằng hai giá trị là bằng nhaunhau (1 pt = 1 px) nhưng chỉ khi trên màn hình 72 ppi thì 1 pt = 1/72 inch nghĩa là khi bạn có thiết bị có ppi cao hơn, tỷ lệ giữa hai trị này bắt đầu chuyển dịch. Nếu bạn nhìn vào hai giá trị này từ góc độ CSS, W3 Org nói rằng 0.75 pt = 1 px.
Apple đã viết toàn bộ mục trên trang này trong trang iOS Developer Library của mình, cố gắng giải thích tại sao việc sử dụng point khác với pixel khi hiển thị hình ảnh được trả lại trên các thiết bị có độ phân giải thấp hơn và cao hơn.
"Ví dụ, trên một thiết bị có màn hình có độ phân giải cao, một đường thẳng chiều rộng 1 point có thể có kết quả thực sự một đường thẳng có chiều rộng là 2 pixel vật lý. Kết quả đó chính là nếu bạn vẽ cùng một nội dung trên hai thiết bị tương tự, chỉ có một trong hai thiết bị đó có màn hình có độ phân giải cao, thì nội dung xuất hiện có cùng kích thước trên cả hai thiết bị. "
Những gì họ quên đề cập đến đó là ngày nay, chúng ta có một số lượng đáng kể các nhà sản xuất có màn hình với các mật độ khác nhau, khiến cho toàn bộ ví dụ đó hơi lờ mờ.
Bây giờ bạn có thể tự hỏi, bạn nên chọn loại nào? Tôi sẽ chọn pixel. Tại sao ư? Có thể nói đó là do lựa chọn cá nhân, và vì tôi chủ yếu tạo ra các bản vẽ hình minh hoạ, tôi chưa bao giờ nghe người ta phàn nàn rằng một minh hoạ có nét viền dày trên iPhone của họ hơn là trên máy tính cá nhân của họ.
Ngoài ra, các điểm ảnh không phụ thuộc vào ppi và bạn có thểsử dụng các tập tin thích hợp cho các thiết bị có độ phân giải cao hơn bằng cách điều chỉnh mức ppi khi tạo một New Document. Cộng với việc có rất nhiều độ phân giải trên các thiết bị khau, nên tôi có xu hướng tin rằng từ 1 pt có thể bằng 2 px trên một trong các thiết bị của Apple, nó có thể có giá trị khác nhau trên một thiết bị từ một nhà sản xuất khác nhau mà họ sử dụng các màn hình hiển thị có mật độ cao hơn .
Quyền quyết định là của bạn Nếu bạn thấy rằng các điểm ảnh hiệu quả đối với bạn, hãy vào mục Units của menu Preference (Edit > Preferences > Units) và cài đặt cả hai giá trị General và Stroke là Pixel. Vì đơn vị chữ Type là dựa theo point, tôi đề xuất bạn cứ để nó theo giá trị mặc định, vì cài đặt nó theo kiểu pixel sẽ không cải thiện độ rõ nét hoặc độ sắc nét của văn bản.
Bước 2
Khi bạn đã điều chỉnh các đơn vị của mình, đã đến lúc tinh chỉnh các thiết lập của Grid. Tôi sẽ không giới thiệu nhiều về lưới Grid vì tôi có một bài viết khác giải thích tất cả mọi thứ bạn cần biết về nó. Tôi chỉ nói rằng nếu bạn muốn tạo ra những tác phẩm nghệ thuật sắc nét thì bạn nên tập trung vào việc thiết lập một lưới siêu chính xác và làm việc với nó với sự hợp tác với chế độ Xem trước Pixel Preview (mà tôi sẽ thảo luận nhiều hơn trong vài phút tới).
Để thay đổi thiết lập mặc định, vào Edit> Preferences> Guides & Grid nơi bạn sẽ thấy hai cài đặt mà bạn cần phải xem xét: Gridline every option và Subdivisions. Tôi đã sử dụng 1 cho cả hai giá trị trong một thời gian và tôi thấy rằng nó là phù hợp nhất với quá trình của tôi, không quan trọng mà dự án mà tôi đang thực hiện là gì. Vâng, bạn sẽ phải chú ý hơn ngoại trừ một điều, nếu bạn giống tôi, bạn sẽ phải thử và trở nên có định hướng chi tiết nhất có thể.
Bước 3
Đối với tất cả các phím mũi tên của chúng ta, Illustrator có một tính năng gọn gàng cho phép chúng ta di chuyển các đối tượng xung quanh với độ chính xác cao hơn bằng cách sử dụng các phím mũi tên hướng của bàn phím. Vì chúng ta muốn mọi thứ đều có độ chính xác cao nhất có thể, chúng ta cần phải điều chỉnh giá trị đó sao cho mỗi lần phím mũi tên bấm thì đối tượng sẽ nhảy chính xác một pixel theo hướng mà chúng ta muốn.
Cài đặt có thể được tìm thấy trong Edit > Preferences > General > Keyboard Increment.
Điều này cực kỳ hữu ích khi chúng ta muốn di chuyển các đối tượng xung quanh một cách nhanh chóng và chính xác trong một khoảng cách ngắn.
4. Quá trình
Cho đến bây giờ, tôi đã nói về một số chỉnh sửa mà bạn có thể sử dụng để làm cho Illustrator chính xác hơn, nhưng các ví dụ thường dạy nhiều hơn là các mô tả chức năng đơn giản, tôi sẽ chỉ cho bạn quá trình tôi thường xuyên thực hiện khi tôi bắt đầu tạo ra một hình nào đó mà tôi dự định sử dụng cho web.
Bước 1
Mọi thứ bắt đầu với Tài liệu của chúng ta. Nếu chúng ta chú ý đến một số cài đặt cơ bản, chúng ta có thể đảm bảo rằng tác phẩm nghệ thuật của chúng tôi có nền tảng pixel-perfect hoàn hảo mà chúng ta có thể bắt đầu xây dựng.
Nhấn Control-N (hoặc vào File> New) và chúng ta hãy xem một số cài đặt, bắt đầu với Profile.
Vì chúng ta thường tập trung vào việc tạo ra các hình ảnh pixel perfect cho web, do đó, Profile nên thiết lập là Web. Bằng cách đó, Illustrator sẽ tự động điều chỉnh các Units sang Pixels và chế độ màu Color Modelà RGB (Red Green Blue).
Nếu bạn để ý kỹ phần kích thước Size của tài liệu của chúng ta, bạn sẽ nhận thấy rằng cả Width và Heightcó các giá trị làm chẵn (960 x 560 px) và không phải là số thập phân (960.5 x 560.38). Nhưng tại sao lại như vậy? Vâng, nếu bạn tạo một Artboard có Width 960.5 px, sẽ có một phần ở bên phải không chiếm toàn bộ các pixel trên lưới, và thay vào đó sẽ bao phủ khoảng một nửa bề mặt của chúng.
Đây là không thể - không thể vì chúng ta muốn Illustrator Align New Objects to Pixel Grid. Chức năng này thực sự quan trọng vì nó chỉ thị cho mỗi đối tượng mới được tạo ra tự nó định vị chính xác vào Pixel Grid, làm cho mọi thứ trông sắc nét.
Ví dụ: nếu chúng ta có một hình chữ nhật 960 x 560 pixel và chúng ta muốn căn chỉnh nó vào trung tâm của Artboard có độ phân giải thập phân, nó sẽ không thể làm được vì các cạnh bên phải và phía dưới sẽ không bao trùm toàn bộ bề mặt của các điểm ảnh nằm bên dưới.
Một số bạn có thể nghĩ rằng tùy chọn này chỉ nên được sử dụng với nội dung trang web có chủ định, nhưng tôi nghĩ rằng sử dụng nó để in ấn có thể làm tăng giá trị vì bạn sẽ làm việc và định vị các chốt neo của bạn bằng một hệ thống chính xác thay vì tác động các chốt neo ở khắp mọi nơi.
Mẹo nhanh: Trong trường hợp bạn vô tình bắt đầu một dự án dựa trên chiều cao và chiều rộng có giá trị thập phân, bạn có thể khắc phục tình huống bằng cách sử dụng Công cụ Artboard Tool (Shift-O) để thay thành các giá trị chẵn nhưng bạn nên thử và lấy kích thước ngay từ đầu, để nó không khiến bạn đau đầu về sau.
Bước 2
Một khi tôi đã chắc chắn rằng tài liệu của tôi được thiết lập chính xác, tôi thường bắt đầu làm việc trên các yếu tố của tôi, đảm bảo rằng mỗi yếu tố trong số chúng sử dụng các giá trị chẵn cho chiều rộng và chiều cao.
Như tôi đã trình bày ở bước trước, quy tắc bao trùm toàn bộ bề mặt pixel cũng được áp dụng ở đây. Nếu bạn muốn tạo một hình sắc nét, ví dụ như một hình vuông, tôi cần nó có giá trị cố định (ví dụ 200 x 200 px), để mỗi cạnh đều bao trùm chính xác cùng số lượng pixel trên Artboard. Bằng cách đó, tôi có thể tạo ra một hình dạng có thể phóng to ở bất kỳ tỷ lệ phần trăm nào và vẫn nhìn rõ ràng.
Nếu hình vuông của tôi là 200,4 x 199,9 px, Illustrator sẽ bắt đầu áp dụng hiệu ứng chống răng cưa vào cạnh bên phải và bên dưới vì chúng sẽ không bao trùm toàn bộ pixel, và bằng cách đó, yếu tố của tôi sẽ bị mờ.
Thật may mắn, những người lành nghề ở Adobe đã đưa ra cách khắc phục những vấn đề này, bằng cách thực hiện chức năng Align to Pixel Grid ở phía dưới cùng của bảng Transform. Nếu bạn chọn đối tượng có kích thước vừa phải và bật tùy chọn Align to, nó sẽ tự động thay đổi Width và Height của hình vuông thành 200 px vì đây là giá trị chẵn gần nhất xác định bởi phần mềm.
Mẹo nhanh: Nếu tùy chọn không hiển thị, đó là bởi vì bạn cần kích hoạt nó bằng cách nhấp vào mũi tên phải chỉ xuống của bảng điều khiển Transform và chọn Show Options.
Bước 3
Đây là những tính năng quan trọng nhất mà Illustrator cung cấp khi tạo ra những thiết kế pixel-perfect. Mặc dù cả hai đều cung cấp một chức năng tương tự, nhưng có một vài điểm khác biệt chính.
Snap to Grid: Như tên gọi của nó, tùy chọn này có liên quan trực tiếp đến Grid mà bạn đã thiết lập. Chức năng này có thể được kích hoạt bằng cách vào View> Snap to Grid (Shift-Control- ") và nó sẽ hướng dẫn một cách cơ bản cho mọi đối tượng từ Artboard của bạn để các cạnh của nó bám lấy các đường lưới giao nhau gần nhất.
Snap to Pixel: Tùy chọn Snap to Pixel hoạt động hơi khác một chút, giống như việc các đối tượng bắt lấy lưới Pixel Gridmà không thể sửa đổi được. Chức năng này bị ẩn cho đến khi bạn chuyển sang Pixel Preview (Alt-Control-Y) khi thay đổi từ Snap to Grid sang Snap to Pixel
Mặc dù khác nhau, nhưng bạn có thể thực hiện hành động Snap to Grid giống như Snap to Pixel nếu bạn chọn Gridline every 1 px, có Subdivision là 1, về cơ bản là tạo ra một lưới nhỏ nhất có thể, là kích thước tương đương với Pixel Grid .
Bước 4
Được sử dụng kết hợp với tùy chọn Snap to Pixel, chế độ xem trước này sẽ là công cụ trợ giúp lớn nhất của bạn trong quá trình tạo ra các tác phẩm nghệ thuật pixel sắc nét. Nó cho phép bạn phóng to theo cấp độ pixel, và xem một cách chính xác những phần nào thiết kế của bạn cần tinh chỉnh. Tôi luôn luôn sử dụng nó, và nó đã giúp tôi rất nhiều. Như tôi đã đề cập, công cụ này có thể được kích hoạt bằng cách vào View> Pixel Preview hoặc bằng cách sử dụng phím tắt Alt-Control-Y.
Bước 5
khi bạn đã kết thúc quá trình sáng tạo, hãy dành một ít thời gian và đảm bảo rằng tất cả các chốt neo được bám lấy Pixel Grid một cách chính xác. Khi bạn thấy các chốt neo đã nhảy đi, chỉ cần lấy công cụ Direct Selection Tool (A), chọn điểm neo thích hợp, và sau đó đặt nó trở lại giao điểm đường lưới gần nhất của nó.
Bạn có thể nghĩ rằng việc sử dụng tùy chọn Align to Pixel Grid sẽ giải quyết các vấn đề này, nhưng theo kinh nghiệm của tôi, đôi khi nó thất bại, và khi điều này xảy ra, tôi luôn dựa vào công cụ Direct Selection Tool (A) đáng tin cậy để tự mình khắc phục chúng .
Bước 6
Các Bezier Handles là một phần quan trọng của bất kỳ phần mềm vector nào trên thị trường vì chúng cho phép người dùng chỉnh sửa hình dạng và hướng của bất kỳ đường dẫn nào (có thể đóng hoặc mở). Vấn đề mà hầu hết những người mới bắt đầu phải đối mặt khi đối phó với việc xử lý là họ thường có khuynh hướng kéo chúng đi khắp nơi, và bằng cách làm như vậy thì hầu như luôn luôn tạo ra các hình dạng trông bị thay đổi.
Bí mật là đảm bảo rằng các tay xoay được kéo (trong khi giữ Shift) theo chiều dọc, ngang hoặc đường chéo chính xác 45 °, theo cách mà phần cuối của chúng được sắp thẳng hàng với một trong những đường lưới giao nhau.
Ngoài ra, nếu đường path mà bạn đang đồ lại có cạnh phẳng, hãy thử kéo tay xoay để nó rơi chính xác vào phần trên cùng của cạnh đó mà không đè lên nó.
5. Xử lý thay đổi kích thước
Khi xử lý với Pixel Perfect Artwork, việc thay đổi kích thước có thể là một nỗi đau thực sự. Nếu bạn thử chọn đối tượng và kéo một trong hai cạnh bên của Bounding Box, nó sẽ phóng to hoặc thu nhỏ đối tượng, nhưng làm như vậy nó sẽ làm hỏng mọi thứ.
Một giải pháp là sử dụng tùy chọn Scale (kích chuột phải> Transform > Scale > Uniform), và sử dụng tăng 50%, vì vậy các giá trị như 150%, 200%, 250% để phóng to và -50% cho việc thu nhỏ xuống còn một nửa kích thước ban đầu.
Đây là lý do tại sao bạn nên luôn luôn lập kế hoạch trước, để bạn biết kích thước chính xác mà bạn cần thiết kế.
Mẹo nhanh: Ngay cả với phương pháp này, bạn sẽ gặp phải các vấn đề, đặc biệt khi bạn có một nhóm lớn các yếu tố có góc tròn và đường cong. Khi điều đó xảy ra, bạn sẽ phải tách nhóm và sau đó điều chỉnh các yếu tố khác nhau tại một thời điểm.
6. Xử lý Xoay vòng
Khi bạn có các hình chữ nhật, xoay chúng khá đơn giản, vì bạn có thể bám các điểm neo của chúng trở lại đường lưới pixel gần nhất. Nhưng những hình dạng góc tròn hoặc đường cong thì sao?
Đây có lẽ là phần gây phiền nhiễu nhất khi nhắm mục tiêu cho các đối tượng điểm ảnh hoàn hảo, vì trong hầu hết các trường hợp, hầu như không thể bám các điểm neo trở lại Pixel Grid vì nó chắc chắn sẽ ảnh hưởng đến hình dạng tổng thể của đối tượng. Thông thường khi tôi có một hình chữ nhật tròn mà cần được xoay, tôi sẽ áp dụng sự xoay vòng và sau đó để lại các đối tượng nguyên như vậy.
Thế là xong!
Nếu bạn làm theo các mẹo nhanh này, bạn sẽ không gặp bất cứ trở ngại nào trong việc tạo ra những tác phẩm nghệ thuật sắc nét tuyệt đẹp sẵn sàng cho bất kỳ thiết bị nào.
Đây là những gì mà tất cả chúng ta cần phải xử lý khi chúng ta bắt đầu sử dụng Adobe Illustrator, vì vậy tôi quyết định tạo ra bài viết ngắn này để giúp bạn nếu bạn đang tìm cách để giải quyết vấn đề này.
1. Vector và Bitmap
Trước khi chúng ta bắt đầu, tôi cũng muốn làm rõ một số tiêu chuẩn khác nhau mà bạn, tôi và tất cả mọi người đang làm việc như một nhà thiết kế cần phải nhận thức được khi chúng ta <assume this line of work>.
Có hai loại hình ảnh chính thường sử dụng của một người làm việc sáng tạo. Một là Vector và loại còn lại là Bitmap.
Một hình Vector được tạo ra bởi một hoặc nhiều đối tượng tạo thành một số lượng các điểm neo và đường path, mà hầu như có thể mở rộng cho bất kỳ mức độ nào mà người dùng muốn hoặc cần, một quá trình thực hiện mà không bị mất đi chất lượng.
Mặt khác, một hình Bitmap được tạo bởi một loạt các điểm ảnh (pixel) cá thể cố định được đồng chỉnh với một lưới, có nghĩa là một bức ảnh được sử dụng hoặc tạo ra với một độ phân giải nhất định, nó sẽ bị mất chất lượng nếu kích thước của nó được thay đổi dưới bất kỳ hình thức nào (được tăng hoặc giảm tỷ lệ). Điều này xảy ra khi lượng thông tin điểm ảnh (số lượng thực tế của các điểm ảnh) bị giảm hoặc phóng to nhiều, vì một số dự án sẽ yêu cầu các kích thước khác nhau cho các mục đích sử dụng khác nhau.
Mặc dù giảm kích thước của một hình ảnh sẽ không ảnh hưởng mạnh đến chất lượng của nó, nhưng phóng to thì hầu hết đều có chất lượng tập tin hình ảnh bị mờ, răng cưa. Có một số chương trình, ví dụ như Perfect Resize sử dụng các thuật toán đặc biệt để tối ưu hóa độ rõ nét và mức độ chi tiết cho các hình ảnh cần được phóng to, nhưng đối với tôi, điều này nhấn mạnh sâu sắc hơn về sự thiếu thốn của một thuộc tính quan trọng khi so sánh Bitmap với Vector: Khả năng mở rộng có chất lượng không đoán trước được.
Cả hai Vector và Bitmap đều phụ thuộc vào môi trường mà chúng được sử dụng. Như bạn có thể đã biết, một tập tin có thể được hiển thị bằng kỹ thuật số hoặc được in ra, sự khác biệt chính là cách mà hình ảnh đó được sao chép lại. Trong khi các máy in là các pixel không đoán trước được, thì màn hình kỹ thuật số, (màn hình máy tính, màn hình điện thoại và máy tính bảng, v.v ...) đều dựa vào độ phân giải để tạo và xuất bất kỳ loại hình ảnh nào, cho dù đó là tập tin Bitmap hay Vector.
Do đó, sự phân chia giữa bản vẽ pixel perfect (điểm ảnh hoàn hảo) và những bản vẽ theo kiểu hay thay đổi đặt ra một vấn đề khó khăn khi những hình ảnh Vector liên hệ với lưới pixel khi mà chúng được bố trí.
May mắn thay, có những giải pháp mà theo tôi nghĩ nên trở thành các quy tắc tiêu chuẩn để sử dụng khi bạn bắt đầu làm việc trên bất kỳ dự án nào, cho dù nó được thiết kế để được đưa trên web hoặc để in ra.
2. Hiểu Cách hoạt động của Adobe Illustrator
Trước khi bạn bắt đầu sửa một cái gì đó, trước tiên bạn cần phải hiểu cách thức "điều đó" hoạt động. Illustrator là một phần của phần mềm dựa trên vector sử dụng các thuật toán toán học để tạo và hiển thị các đường path (cho dù chúng được đóng hoặc mở) mà chúng ta thấy bằng cách sử dụng các điểm neo. Những điểm neo này là các điểm đơn giản mà bạn có thể thao tác để thay đổi kích thước và hình dạng của một đối tượng.
3. Điều chỉnh cài đặt của Illustrator
Theo mặc định, Illustrator đi kèm với một loạt các tùy chọn và cài đặt, hầu hết được xác định trước, để bạn có thể bắt đầu làm việc ngay khi bạn cài đặt nó trên máy. Đối với hầu hết mọi người, việc làm này trở nên tốt hơn, nhưng khi quy trình công việc của bạn trở nên chi tiết hơn, bạn sẽ thấy rằng bạn cần phải điều chỉnh một số trong số các thiết lập trước đo để có được thiết kế như ý. Trong các bước sau, tôi sẽ giới thiệu cho bạn một số điều cơ bản mà tôi muốn điều chỉnh mỗi khi tôi có một cài đặt Illustrator mới.
Trước khi bắt đầu, tôi muốn chỉ ra rằng đây là thuộc về sự ưa thích cá nhân được phát triển thông qua một quá trình thử nghiệm và sai sót, và tôi sẽ không nói chúng là "hoàn hảo" hoặc "chính xác" - nó thiên về "thích hợp" cho dự án thực hiện theo kiểu pixel-perfect. Không có trường hợp nào phù hợp với cùng một mô hình, nhưng hầu hết thời gian sẽ cho bạn các giải pháp đáng tin cậy để điều chỉnh và làm cho phù hợp với quy trình công việc của bạn.
Bước 1
Trước khi chúng tai bắt đầu điều chỉnh các đơn vị, tôi muốn dùng một chút thời gian và so sánh giá trị mặc định mà Illustrator sử dụng (point) để tinh chỉnh giá trị mà chúng ta sẽ chọn (pixel) để xem sự khác biệt.
Point: Về khía cạnh typographic, một point (pt) là đơn vị nhỏ nhất được sử dụng để đo kích thước phông chữ, cách quãng, thụt lề, và khoảng trống trước một đoạn văn.
Pixel: Theo Wikipedia, từ quan khía cạnh hình ảnh số, một pixel (px) là "yếu tố nhỏ nhất định địa chỉ được" của một hình ảnh hiển thị trên một màn hình kỹ thuật số. Khi các màn hình và các màn hình thiết bị khác hiển thị hình ảnh, chúng ta cũng có thể xác định một pixel như là đơn vị đo lường cơ bản bằng cách xác định độ phân giải của thiết bị và kích thước của các yếu tố được hiển thị trên nó.
Vì vậy, chúng ta có hai đơn vị, nhưng chúng khác nhau như thế nào? Nhiều bài viết nói rằng hai giá trị là bằng nhaunhau (1 pt = 1 px) nhưng chỉ khi trên màn hình 72 ppi thì 1 pt = 1/72 inch nghĩa là khi bạn có thiết bị có ppi cao hơn, tỷ lệ giữa hai trị này bắt đầu chuyển dịch. Nếu bạn nhìn vào hai giá trị này từ góc độ CSS, W3 Org nói rằng 0.75 pt = 1 px.
Apple đã viết toàn bộ mục trên trang này trong trang iOS Developer Library của mình, cố gắng giải thích tại sao việc sử dụng point khác với pixel khi hiển thị hình ảnh được trả lại trên các thiết bị có độ phân giải thấp hơn và cao hơn.
"Ví dụ, trên một thiết bị có màn hình có độ phân giải cao, một đường thẳng chiều rộng 1 point có thể có kết quả thực sự một đường thẳng có chiều rộng là 2 pixel vật lý. Kết quả đó chính là nếu bạn vẽ cùng một nội dung trên hai thiết bị tương tự, chỉ có một trong hai thiết bị đó có màn hình có độ phân giải cao, thì nội dung xuất hiện có cùng kích thước trên cả hai thiết bị. "
Những gì họ quên đề cập đến đó là ngày nay, chúng ta có một số lượng đáng kể các nhà sản xuất có màn hình với các mật độ khác nhau, khiến cho toàn bộ ví dụ đó hơi lờ mờ.
Bây giờ bạn có thể tự hỏi, bạn nên chọn loại nào? Tôi sẽ chọn pixel. Tại sao ư? Có thể nói đó là do lựa chọn cá nhân, và vì tôi chủ yếu tạo ra các bản vẽ hình minh hoạ, tôi chưa bao giờ nghe người ta phàn nàn rằng một minh hoạ có nét viền dày trên iPhone của họ hơn là trên máy tính cá nhân của họ.
Ngoài ra, các điểm ảnh không phụ thuộc vào ppi và bạn có thểsử dụng các tập tin thích hợp cho các thiết bị có độ phân giải cao hơn bằng cách điều chỉnh mức ppi khi tạo một New Document. Cộng với việc có rất nhiều độ phân giải trên các thiết bị khau, nên tôi có xu hướng tin rằng từ 1 pt có thể bằng 2 px trên một trong các thiết bị của Apple, nó có thể có giá trị khác nhau trên một thiết bị từ một nhà sản xuất khác nhau mà họ sử dụng các màn hình hiển thị có mật độ cao hơn .
Quyền quyết định là của bạn Nếu bạn thấy rằng các điểm ảnh hiệu quả đối với bạn, hãy vào mục Units của menu Preference (Edit > Preferences > Units) và cài đặt cả hai giá trị General và Stroke là Pixel. Vì đơn vị chữ Type là dựa theo point, tôi đề xuất bạn cứ để nó theo giá trị mặc định, vì cài đặt nó theo kiểu pixel sẽ không cải thiện độ rõ nét hoặc độ sắc nét của văn bản.
Bước 2
Khi bạn đã điều chỉnh các đơn vị của mình, đã đến lúc tinh chỉnh các thiết lập của Grid. Tôi sẽ không giới thiệu nhiều về lưới Grid vì tôi có một bài viết khác giải thích tất cả mọi thứ bạn cần biết về nó. Tôi chỉ nói rằng nếu bạn muốn tạo ra những tác phẩm nghệ thuật sắc nét thì bạn nên tập trung vào việc thiết lập một lưới siêu chính xác và làm việc với nó với sự hợp tác với chế độ Xem trước Pixel Preview (mà tôi sẽ thảo luận nhiều hơn trong vài phút tới).
Để thay đổi thiết lập mặc định, vào Edit> Preferences> Guides & Grid nơi bạn sẽ thấy hai cài đặt mà bạn cần phải xem xét: Gridline every option và Subdivisions. Tôi đã sử dụng 1 cho cả hai giá trị trong một thời gian và tôi thấy rằng nó là phù hợp nhất với quá trình của tôi, không quan trọng mà dự án mà tôi đang thực hiện là gì. Vâng, bạn sẽ phải chú ý hơn ngoại trừ một điều, nếu bạn giống tôi, bạn sẽ phải thử và trở nên có định hướng chi tiết nhất có thể.
Bước 3
Đối với tất cả các phím mũi tên của chúng ta, Illustrator có một tính năng gọn gàng cho phép chúng ta di chuyển các đối tượng xung quanh với độ chính xác cao hơn bằng cách sử dụng các phím mũi tên hướng của bàn phím. Vì chúng ta muốn mọi thứ đều có độ chính xác cao nhất có thể, chúng ta cần phải điều chỉnh giá trị đó sao cho mỗi lần phím mũi tên bấm thì đối tượng sẽ nhảy chính xác một pixel theo hướng mà chúng ta muốn.
Cài đặt có thể được tìm thấy trong Edit > Preferences > General > Keyboard Increment.
Điều này cực kỳ hữu ích khi chúng ta muốn di chuyển các đối tượng xung quanh một cách nhanh chóng và chính xác trong một khoảng cách ngắn.
4. Quá trình
Cho đến bây giờ, tôi đã nói về một số chỉnh sửa mà bạn có thể sử dụng để làm cho Illustrator chính xác hơn, nhưng các ví dụ thường dạy nhiều hơn là các mô tả chức năng đơn giản, tôi sẽ chỉ cho bạn quá trình tôi thường xuyên thực hiện khi tôi bắt đầu tạo ra một hình nào đó mà tôi dự định sử dụng cho web.
Bước 1
Mọi thứ bắt đầu với Tài liệu của chúng ta. Nếu chúng ta chú ý đến một số cài đặt cơ bản, chúng ta có thể đảm bảo rằng tác phẩm nghệ thuật của chúng tôi có nền tảng pixel-perfect hoàn hảo mà chúng ta có thể bắt đầu xây dựng.
Nhấn Control-N (hoặc vào File> New) và chúng ta hãy xem một số cài đặt, bắt đầu với Profile.
Vì chúng ta thường tập trung vào việc tạo ra các hình ảnh pixel perfect cho web, do đó, Profile nên thiết lập là Web. Bằng cách đó, Illustrator sẽ tự động điều chỉnh các Units sang Pixels và chế độ màu Color Modelà RGB (Red Green Blue).
Nếu bạn để ý kỹ phần kích thước Size của tài liệu của chúng ta, bạn sẽ nhận thấy rằng cả Width và Heightcó các giá trị làm chẵn (960 x 560 px) và không phải là số thập phân (960.5 x 560.38). Nhưng tại sao lại như vậy? Vâng, nếu bạn tạo một Artboard có Width 960.5 px, sẽ có một phần ở bên phải không chiếm toàn bộ các pixel trên lưới, và thay vào đó sẽ bao phủ khoảng một nửa bề mặt của chúng.
Đây là không thể - không thể vì chúng ta muốn Illustrator Align New Objects to Pixel Grid. Chức năng này thực sự quan trọng vì nó chỉ thị cho mỗi đối tượng mới được tạo ra tự nó định vị chính xác vào Pixel Grid, làm cho mọi thứ trông sắc nét.
Ví dụ: nếu chúng ta có một hình chữ nhật 960 x 560 pixel và chúng ta muốn căn chỉnh nó vào trung tâm của Artboard có độ phân giải thập phân, nó sẽ không thể làm được vì các cạnh bên phải và phía dưới sẽ không bao trùm toàn bộ bề mặt của các điểm ảnh nằm bên dưới.
Một số bạn có thể nghĩ rằng tùy chọn này chỉ nên được sử dụng với nội dung trang web có chủ định, nhưng tôi nghĩ rằng sử dụng nó để in ấn có thể làm tăng giá trị vì bạn sẽ làm việc và định vị các chốt neo của bạn bằng một hệ thống chính xác thay vì tác động các chốt neo ở khắp mọi nơi.
Mẹo nhanh: Trong trường hợp bạn vô tình bắt đầu một dự án dựa trên chiều cao và chiều rộng có giá trị thập phân, bạn có thể khắc phục tình huống bằng cách sử dụng Công cụ Artboard Tool (Shift-O) để thay thành các giá trị chẵn nhưng bạn nên thử và lấy kích thước ngay từ đầu, để nó không khiến bạn đau đầu về sau.
Bước 2
Một khi tôi đã chắc chắn rằng tài liệu của tôi được thiết lập chính xác, tôi thường bắt đầu làm việc trên các yếu tố của tôi, đảm bảo rằng mỗi yếu tố trong số chúng sử dụng các giá trị chẵn cho chiều rộng và chiều cao.
Như tôi đã trình bày ở bước trước, quy tắc bao trùm toàn bộ bề mặt pixel cũng được áp dụng ở đây. Nếu bạn muốn tạo một hình sắc nét, ví dụ như một hình vuông, tôi cần nó có giá trị cố định (ví dụ 200 x 200 px), để mỗi cạnh đều bao trùm chính xác cùng số lượng pixel trên Artboard. Bằng cách đó, tôi có thể tạo ra một hình dạng có thể phóng to ở bất kỳ tỷ lệ phần trăm nào và vẫn nhìn rõ ràng.
Nếu hình vuông của tôi là 200,4 x 199,9 px, Illustrator sẽ bắt đầu áp dụng hiệu ứng chống răng cưa vào cạnh bên phải và bên dưới vì chúng sẽ không bao trùm toàn bộ pixel, và bằng cách đó, yếu tố của tôi sẽ bị mờ.
Thật may mắn, những người lành nghề ở Adobe đã đưa ra cách khắc phục những vấn đề này, bằng cách thực hiện chức năng Align to Pixel Grid ở phía dưới cùng của bảng Transform. Nếu bạn chọn đối tượng có kích thước vừa phải và bật tùy chọn Align to, nó sẽ tự động thay đổi Width và Height của hình vuông thành 200 px vì đây là giá trị chẵn gần nhất xác định bởi phần mềm.
Mẹo nhanh: Nếu tùy chọn không hiển thị, đó là bởi vì bạn cần kích hoạt nó bằng cách nhấp vào mũi tên phải chỉ xuống của bảng điều khiển Transform và chọn Show Options.
Bước 3
Đây là những tính năng quan trọng nhất mà Illustrator cung cấp khi tạo ra những thiết kế pixel-perfect. Mặc dù cả hai đều cung cấp một chức năng tương tự, nhưng có một vài điểm khác biệt chính.
Snap to Grid: Như tên gọi của nó, tùy chọn này có liên quan trực tiếp đến Grid mà bạn đã thiết lập. Chức năng này có thể được kích hoạt bằng cách vào View> Snap to Grid (Shift-Control- ") và nó sẽ hướng dẫn một cách cơ bản cho mọi đối tượng từ Artboard của bạn để các cạnh của nó bám lấy các đường lưới giao nhau gần nhất.
Bước 4
Được sử dụng kết hợp với tùy chọn Snap to Pixel, chế độ xem trước này sẽ là công cụ trợ giúp lớn nhất của bạn trong quá trình tạo ra các tác phẩm nghệ thuật pixel sắc nét. Nó cho phép bạn phóng to theo cấp độ pixel, và xem một cách chính xác những phần nào thiết kế của bạn cần tinh chỉnh. Tôi luôn luôn sử dụng nó, và nó đã giúp tôi rất nhiều. Như tôi đã đề cập, công cụ này có thể được kích hoạt bằng cách vào View> Pixel Preview hoặc bằng cách sử dụng phím tắt Alt-Control-Y.
Bước 5
khi bạn đã kết thúc quá trình sáng tạo, hãy dành một ít thời gian và đảm bảo rằng tất cả các chốt neo được bám lấy Pixel Grid một cách chính xác. Khi bạn thấy các chốt neo đã nhảy đi, chỉ cần lấy công cụ Direct Selection Tool (A), chọn điểm neo thích hợp, và sau đó đặt nó trở lại giao điểm đường lưới gần nhất của nó.
Bạn có thể nghĩ rằng việc sử dụng tùy chọn Align to Pixel Grid sẽ giải quyết các vấn đề này, nhưng theo kinh nghiệm của tôi, đôi khi nó thất bại, và khi điều này xảy ra, tôi luôn dựa vào công cụ Direct Selection Tool (A) đáng tin cậy để tự mình khắc phục chúng .
Bước 6
Các Bezier Handles là một phần quan trọng của bất kỳ phần mềm vector nào trên thị trường vì chúng cho phép người dùng chỉnh sửa hình dạng và hướng của bất kỳ đường dẫn nào (có thể đóng hoặc mở). Vấn đề mà hầu hết những người mới bắt đầu phải đối mặt khi đối phó với việc xử lý là họ thường có khuynh hướng kéo chúng đi khắp nơi, và bằng cách làm như vậy thì hầu như luôn luôn tạo ra các hình dạng trông bị thay đổi.
Bí mật là đảm bảo rằng các tay xoay được kéo (trong khi giữ Shift) theo chiều dọc, ngang hoặc đường chéo chính xác 45 °, theo cách mà phần cuối của chúng được sắp thẳng hàng với một trong những đường lưới giao nhau.
Ngoài ra, nếu đường path mà bạn đang đồ lại có cạnh phẳng, hãy thử kéo tay xoay để nó rơi chính xác vào phần trên cùng của cạnh đó mà không đè lên nó.
5. Xử lý thay đổi kích thước
Khi xử lý với Pixel Perfect Artwork, việc thay đổi kích thước có thể là một nỗi đau thực sự. Nếu bạn thử chọn đối tượng và kéo một trong hai cạnh bên của Bounding Box, nó sẽ phóng to hoặc thu nhỏ đối tượng, nhưng làm như vậy nó sẽ làm hỏng mọi thứ.
Một giải pháp là sử dụng tùy chọn Scale (kích chuột phải> Transform > Scale > Uniform), và sử dụng tăng 50%, vì vậy các giá trị như 150%, 200%, 250% để phóng to và -50% cho việc thu nhỏ xuống còn một nửa kích thước ban đầu.
Đây là lý do tại sao bạn nên luôn luôn lập kế hoạch trước, để bạn biết kích thước chính xác mà bạn cần thiết kế.
Mẹo nhanh: Ngay cả với phương pháp này, bạn sẽ gặp phải các vấn đề, đặc biệt khi bạn có một nhóm lớn các yếu tố có góc tròn và đường cong. Khi điều đó xảy ra, bạn sẽ phải tách nhóm và sau đó điều chỉnh các yếu tố khác nhau tại một thời điểm.
6. Xử lý Xoay vòng
Khi bạn có các hình chữ nhật, xoay chúng khá đơn giản, vì bạn có thể bám các điểm neo của chúng trở lại đường lưới pixel gần nhất. Nhưng những hình dạng góc tròn hoặc đường cong thì sao?
Đây có lẽ là phần gây phiền nhiễu nhất khi nhắm mục tiêu cho các đối tượng điểm ảnh hoàn hảo, vì trong hầu hết các trường hợp, hầu như không thể bám các điểm neo trở lại Pixel Grid vì nó chắc chắn sẽ ảnh hưởng đến hình dạng tổng thể của đối tượng. Thông thường khi tôi có một hình chữ nhật tròn mà cần được xoay, tôi sẽ áp dụng sự xoay vòng và sau đó để lại các đối tượng nguyên như vậy.
Thế là xong!
Nếu bạn làm theo các mẹo nhanh này, bạn sẽ không gặp bất cứ trở ngại nào trong việc tạo ra những tác phẩm nghệ thuật sắc nét tuyệt đẹp sẵn sàng cho bất kỳ thiết bị nào.
Người dịch: Na Dang
Nguồn Tutsplus
Nguồn Tutsplus
