Photoshop so với Illustrator để phát triển biểu tượng


7

Khách hàng của tôi đang yêu cầu các tệp SVG (lưu dưới dạng SVG sẽ yêu cầu tôi xây dựng biểu tượng trong Illustrator), nhưng tôi luôn thiết kế các biểu tượng trong Photoshop (nhập nghệ thuật vector từ Illustrator và đặt làm đối tượng thông minh, + áp dụng các kiểu lớp) thấy rằng Photoshop cho phép linh hoạt hơn trong các hiệu ứng phân lớp (đối với bóng đổ, độ dốc cho một cái nhìn nổi).

Có ai có bất kỳ kinh nghiệm nào trong việc xây dựng các biểu tượng trong Illustrator và tạo ra hiệu ứng tương tự như Photoshop cung cấp không?

Tôi hy vọng sẽ giải quyết trường hợp của mình, rằng tôi có thể xây dựng các biểu tượng trong Photoshop và dễ dàng điều chỉnh chúng theo bất kỳ kích thước yêu cầu nào nhưng tôi rất vui khi xây dựng chúng trong Illustrator nếu tôi có thể tạo các hiệu ứng tương tự.


3
Có vẻ như họ có một số nhiệm vụ cụ thể yêu cầu SVG; bạn có thể hỏi khách hàng của bạn tại sao họ muốn các tệp SVG nói riêng không?
lawndartcatcher

Câu trả lời:


5

Nếu SVG là đầu ra mong muốn, tôi khuyên bạn nên thử InkScape. Đó là soure mở. Mặc dù giao diện người dùng không hoàn hảo như AI, nhưng nó khá mạnh mẽ và định dạng tệp gốc là SVG, vì vậy rất phù hợp cho công việc của SVG.

Đối với 'hiệu ứng', bạn có thể mô phỏng các hiệu ứng raster với các tệp vectơ và ngược lại. Nó có thể bị lừa tùy thuộc vào loại hiệu ứng, nhưng chắc chắn có thể thực hiện được.


Tôi vẫn gặp sự cố khi tạo các hiệu ứng phong cách tương tự trong AI (ngay cả khi tôi có thể, các hiệu ứng không thực sự dịch trong xuất> SVG). Tôi đã tải xuống Inkscpae trong số (Acorn, Phác thảo, Opacity, v.v.) - không có kết quả. Đừng tìm thấy bất kỳ cái nào trong số chúng rất trực quan và nếu tôi sử dụng nó, nó sẽ cần nhập một EPS và có thể xuất dưới dạng SVG. Tôi cũng đã thử tải một plugin xuất SVG vào Fireworks, nhưng nó không nhập dưới dạng tệp nhúng (tạo nhiều tệp) + các plugin được cập nhật CS5 để hỗ trợ thêm SVG (cho các bản cập nhật HTML5) vì vậy tôi bị mất tại giải pháp SVG, 99
Leslie

Inkscape là tùy chọn tốt nhất cho công việc SVG thuần túy. Giống như bất kỳ phần mềm nào, phải mất một chút để làm quen với giao diện người dùng ... điều đó sẽ không xảy ra trong một giờ. Nhưng nó được thực hiện khá tốt. Mặc dù vậy, tôi đánh giá nó tương tự như Macromedia Freehand hơn Adobe Illustrator. Điều đó nói rằng, tôi sẽ hy vọng rằng AI sẽ trở nên tốt hơn khi hỗ trợ SVG. Với Flash trên đường ra, Adobe phải trở lại để tăng tốc độ trên SVG và tương tự.
DA01

4

Nó phụ thuộc rất nhiều vào nghệ thuật và trình độ kỹ năng của bạn với Illustrator.

Illustrator không có bóng đổ, độ dốc, độ sáng, v.v ... Vì vậy, tất cả có thể được thực hiện trong Illustrator. Đó chỉ là vấn đề về trình độ của một người.

SVG cung cấp rất nhiều hơn bất kỳ định dạng Photoshop nào. SVG có thể được thu nhỏ khi đang bay và duy trì sự xuất hiện ... png / gif / vv. không thể


Đã từ rất lâu kể từ khi sử dụng Illustrator, vì vậy có thể bây giờ đã khác, nhưng trong quá khứ, những thứ như bóng đổ được dựa trên raster, vì vậy không chắc chúng có hoạt động trong SVG hay không.
DA01

1
@ DA01 Chúng được rasterized, và sau đó được nhúng trong SVG. Những loại đánh bại mục đích của SVG, nhưng nó có thể được thực hiện. <image xlink:href="data:image/png;base64,{bytes}">. Tôi không chắc những chương trình khác tiêu thụ SVG, nhưng tôi tin rằng tất cả các trình duyệt chính được hỗ trợ.
Farray

Tôi cho rằng nếu các SVG sẽ chỉ được sử dụng ở một kích thước, điều đó sẽ hoạt động. Nhưng như bạn chỉ ra, đó là loại đánh bại điểm sử dụng SVG để bắt đầu.
DA01

@ DA01: Nó không và nó không. SVG luôn được thiết kế để hỗ trợ nhúng hình ảnh raster. Nhưng điều này vẫn cho phép bạn sử dụng các vectơ bất cứ khi nào có thể. Nếu bạn duy trì khả năng chỉnh sửa Illustrator, thì bạn luôn có thể có bóng đổ, v.v. được hiển thị lại ở độ phân giải cao hơn. Ngoài ra, đối với hầu hết các hiệu ứng đơn giản như làm mờ và đổ bóng, bạn chỉ có thể sử dụng các hiệu ứng từ menu bộ lọc SVG.
Lèse majesté

3

Tôi là một nghệ sĩ vector, tôi luôn làm mọi thứ vector-ly sau đó rasterise nó đến kích thước yêu cầu. Thực hiện một biểu tượng trong vector là mong muốn vì bạn có thể mở rộng chúng thành bất kỳ kích thước nào sau đó, thậm chí có kích thước A0 mà không làm giảm chất lượng.

Giải pháp của tôi cho bạn là đây. Làm trong Photoshop như raster, làm nó ở kích thước lớn hơn một chút, giả sử 256 x 256 với đủ chi tiết và độ dày đường kẻ sẽ trông tốt ngay cả ở 64 x 64.

Khi bạn hài lòng với kết quả rasterised, sau đó chuyển đổi sang .svg bằng cách sử dụng Inkscape (vâng, có một chức năng trong đó để theo dõi bitmap!) Hoặc Vectormagic . Và bạn sẽ kết thúc với một .svg đẹp để làm cho khách hàng của bạn hài lòng.

Tùy thuộc vào hiệu ứng của bạn, bạn có thể kết thúc với một tệp vectơ lớn hơn, dù sao đi nữa, đừng quá nặng về các hiệu ứng đặc biệt, vì các chương trình này sẽ mất thời gian để dịch raster của bạn thành các vùng (vectơ) màu.

Sau này, bạn có thể sử dụng Illustrator hoặc Inkscape để tinh chỉnh .svg của mình.

Hãy cho tôi biết nếu giải pháp này khả thi cho bạn. Tất cả tốt nhất.


2
có thể hoạt động tùy thuộc vào phong cách minh họa, nhưng lưu ý rằng theo dõi tự động hiếm khi tạo ra kết quả có chất lượng ... đặc biệt là khi bắt đầu với tệp raster có độ phân giải thấp như vậy.
DA01

Đúng, tùy thuộc vào tác phẩm nghệ thuật và sự phức tạp của nó. Bức tranh của Rembrandt chắc chắn nằm ngoài phạm vi của dấu vết tự động ^ _ ^
ikel

IME, tự động theo dõi có thể hoạt động tốt nếu bạn bắt đầu từ một bản quét độ phân giải cao của bản vẽ đen trắng, nhưng tôi thực sự không mong đợi nhận được bất cứ điều gì hữu ích khi truy tìm một bitmap 256 x 256 pixel với màu sắc và độ dốc phức tạp. Tất nhiên, nó phụ thuộc rất nhiều vào chương trình bạn sử dụng; Vector Magic trông khá tốt trong nháy mắt, nhưng có vẻ như nói rằng hầu hết các hình ảnh mẫu trên trang web của họ vẫn không có gì ngoài những hình vẽ màu sắc rắn với những đường viền đơn giản.
Ilmari Karonen

0

Rất nhiều câu trả lời tuyệt vời ở đây rồi. Tôi khuyên bạn nên kiểm tra Sổ tay Biểu tượng của Jon Hicks http://iconhandbook.co.uk/ để đọc thêm. Cá nhân tôi sẽ sử dụng họa sĩ minh họa trừ khi thực hiện favicon 16x16

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.