Học Photoshop chỉ để thiết kế web


17

Tôi muốn trở thành một nhà thiết kế web, vì vậy tôi đang xem rất nhiều video hướng dẫn Photoshop, nhưng một số trong những hướng dẫn đó không hữu ích cho thiết kế web. Ví dụ, một số bộ phim nói về da, hoặc răng hoặc vẽ một bông hoa hoặc thay đổi mô hình của một bức tường hoặc những thứ như thế này. Bởi vì tôi không có bất kỳ tài nguyên cụ thể nào cho thiết kế web và những hướng dẫn đó là một loại lãng phí thời gian cho tôi!

Bạn có biết nguồn hướng dẫn nào để giúp tôi học thiết kế web trong Photoshop không?

Tôi nên làm gì để tập trung vào thiết kế web trong Photoshop?

Những phần nào của Photoshop là cần thiết cho thiết kế web và những phần nào không?

Câu trả lời:


15

Mỗi công cụ, cọ vẽ, bộ lọc và hiệu ứng trong Photoshop đều có mục đích riêng trên thế giới. Không có đơn giản "học tốt công cụ này và sử dụng nó cho mọi thứ" bởi vì các công cụ khác nhau, vv được sử dụng cho các hiệu ứng khác nhau.

Ví dụ: nếu bạn thích các nút bóng hơi hơi bóng trên trang của bạn (những thứ này rất phổ biến trước đây), bạn sẽ cần sử dụng một số bóng, một số độ dốc, mặt nạ và có thể một chút đùa tay bằng công cụ cọ vẽ. Đối với một nền, bạn có thể chỉ cần sử dụng một màu hoặc gradient với mặt nạ có họa tiết / hoa văn.

Vì không có "một phần của Photoshop" để học, điều tốt nhất bạn có thể làm là trở nên tròn trịa bằng cách sử dụng các công cụ khác nhau. Duyệt xung quanh và xem tất cả các loại trang web. Lưu ý các tính năng mà bạn thích, và sau đó cố gắng tự tạo lại chúng. Thường thì bạn có thể phân tích các phần tử - đối tượng có viền, độ dốc, kết cấu, nguồn sáng, v.v. - và tạo lại một cái gì đó tương tự.

Đồng thời, tôi không thể ham nhà đủ mạnh để có nhiều thứ để thiết kế hơn là chỉ Photoshop. Tôi đề nghị sẽ được tham gia một lớp thiết kế tại các trường cao đẳng cộng đồng địa phương (hoặc whever) và nhận được một cảm giác về những thứ như sự cân bằng, màu sắc, khoảng trắng, vv Những khái niệm thường làm cho sự khác biệt giữa chuyên nghiệp và trông như dì của ai đó ( ai, trong kịch bản này, không phải là nhà thiết kế bằng thương mại ) đã chỉnh sửa mẫu Geocities.


4
"... có nhiều thứ để thiết kế hơn là chỉ Photoshop." Nghe nghe! +1.
Philip Regan

1
Photoshop thiếu nghiêm trọng một số tính năng mà việc thiết kế bố cục sẽ có lợi từ ... cùng với rất nhiều công cụ vector. Tôi có thể chuyển sang vẽ tranh minh họa và sử dụng photoshop cho các đồ họa chuyên dụng khác. Giống như các nhân vật, biểu tượng quang học ...
Muhammad Umer

17

"Tôi muốn trở thành một nhà thiết kế web, vì vậy tôi đang xem rất nhiều video hướng dẫn Photoshop"

Bạn có biết HTML, CSS và JS không? Nếu không, bắt đầu ở đó đầu tiên.

Photoshop sau đó được sử dụng như một công cụ để tạo ra đồ họa đi kèm với HTML, CSS và JS.

Không có gì đặc biệt 'thiết kế trang web' tập trung vào các công cụ cụ thể trong PhotoShop. Nó chỉ đơn giản là một công cụ chỉnh sửa và tạo hình ảnh.


4

Để thiết kế trang web, bạn cũng nên xem các mockup khác. Hãy xem xét một số hiệu ứng bạn có thể sử dụng như lột trang, liên kết thanh điều hướng. Rất nhiều điều này không khó thực hiện trong Photoshop nhưng sẽ đòi hỏi một chút về Google. Tôi thường kiểm tra Dribbble , một cộng đồng thiết kế tuyệt vời. Nó rất phổ biến, vì vậy chắc chắn bạn sẽ thấy rất nhiều kỹ thuật mới mà các nhà thiết kế web đang triển khai.

Nhưng để có cái nhìn tổng quát, hãy thử làm việc với một bộ hướng dẫn được sử dụng đặc biệt để thiết kế trang web. Ngay cả hướng dẫn thực sự cơ bản. Bởi vì những điều này sẽ phác thảo các bước cho bạn và bạn có thể sao chép chúng vào các dự án trong tương lai. Tôi đã thêm 2 tài nguyên thực sự tuyệt vời bên dưới, tôi hy vọng bạn sẽ kiểm tra chúng. Tôi đảm bảo bạn sẽ tìm thấy hướng dẫn mẫu cho người mới bắt đầu mà bạn thích - và bạn sẽ học được nhiều điều!


4

Nếu bạn muốn thiết kế trang web, bạn sẽ làm việc với Fireworks tốt hơn nhiều so với Photoshop. PS, về cơ bản, là một ứng dụng xử lý ảnh và trong khi các công cụ của nó có thể được sử dụng cho khung lưới, chúng không đặc biệt hiệu quả với nó. Nói cách khác: sử dụng PS cho thiết kế web cũng giống như sử dụng PS làm ứng dụng DTP trên InDesign. Vâng, nó có thể được thực hiện, nhưng đó không phải là một cách tuyệt vời để làm điều đó và bạn sẽ mất đi trong thời gian dài.

Những lợi thế mà Pháo hoa mang lại là:

  • dễ dàng hơn nhiều để làm việc với các hình dạng vector thực sự
  • FAR dễ dàng hơn để xác định kích thước pixel; không làm mờ các nét trên kéo dài, vv
  • có thể định nghĩa 'trang chính' để thực hiện thay đổi thiết kế trang web cho các mô hình của bạn mà không phải làm lại từng hình ảnh
  • dễ dàng hơn để tạo thư viện các điều khiển UI thường được sử dụng (có giá trị để thiết kế các ứng dụng web)
  • Giao diện người dùng gần với giao diện ứng dụng máy tính để bàn thông thường, có nghĩa là đường cong học tập nông hơn

Những lợi thế thực sự duy nhất mà Photoshop mang lại cho bảng là thực tế rằng

  • kết xuất phông chữ tốt hơn
  • đồng nghiệp của bạn sẽ biết ứng dụng tốt hơn (một chút)

1
Vâng, Fireworks là tốt hơn, nếu không, bạn phải sử dụng cả Illustrator và Photoshop và chuyển đổi qua lại.
Cakey

0

Trên ghi chú của "có nhiều thứ để thiết kế hơn Photoshop": Tôi thấy điều này sâu sắc: http://naldzgraphics.net/tips/what-designers-need-to-ledge-about-typography/


Nó bị văn xuôi và lỗi ngữ pháp thỉnh thoảng. Tôi có thể tóm tắt nó (và cải thiện nó) trong một hộp bình luận: Sử dụng hương vị tốt trong tất cả mọi thứ, và tìm kiếm và hiểu rất rõ về các từ sau: font vs typeface , serif vs. sans serif, kTHER, theo dõi, khoảng cách , dẫn đầu, liên kết, tuôn ra, biện minh. Bài viết không cung cấp định nghĩa rõ ràng hoặc đầy đủ cho hầu hết các định nghĩa này; những lời giải thích hời hợt và có vẻ như đã qua sử dụng.
tự đại diện

Ngoài ra, đó là một liên kết chỉ trả lời.
tự đại diện

0

Photoshop chỉ là một công cụ và bạn càng biết nhiều về công cụ đó, bạn càng có thể sử dụng nó tốt hơn để làm những gì bạn muốn làm. Tuy nhiên, có nhiều thứ để thiết kế hơn là chỉ biết Photoshop.

Suy nghĩ này là bạn chỉ cần học Photoshop và sau đó bạn sẽ trở thành một nhà thiết kế cũng giống như tự gọi mình là người xây dựng vì bạn biết cách sử dụng búa, hoặc thợ cơ khí vì bạn có thể sử dụng cờ lê. Thiết kế như vậy là làm cho mọi thứ hoạt động tốt (và có thể trông rất tốt trong quá trình), nó rất ít liên quan đến việc biết Photoshop / Illustrator / InDesign / Sketch / bất cứ điều gì, nhưng cách bạn sử dụng các công cụ đó để thực hiện ý tưởng của mình.

Có hàng tấn hướng dẫn xấu trên YouTube và hàng tấn những bài hướng dẫn tốt. Tìm hiểu làm thế nào để làm tất cả, các kỹ thuật sẽ có giá trị xuống dòng nào. Khối sáng tạo cũng có hướng dẫn tốt đẹp. Nhưng hơn nữa, hãy nhìn vào lý thuyết màu sắc, lý thuyết bố cục, cách đánh máy ( Dừng ăn cắp cừu của Eric Spiekerman & Tìm hiểu cách thức hoạt động là một phần giới thiệu rất tốt) và các kỹ năng thiết kế đồ họa truyền thống khác là những kỹ năng quý giá hơn nhiều để đầu tư thời gian của bạn hơn là chỉ học Photoshop.

Ngoài ra, như ai đó đã đề cập trước đó, học HTML / CSS / JS cũng là một điểm cộng nhất định cho công việc thiết kế web.


-2

Bạn có thể xác thực tệp PSD của mình cho các sự cố tương thích web đã biết tại đây https://www.oss-usa.com/web-preflight?promo=web-preflight hoàn toàn miễn phí


Xin chào Nik, chào mừng bạn đến với GDSE và cảm ơn câu trả lời của bạn. Tôi không thấy làm thế nào điều này trả lời các câu hỏi, bạn có thể vui lòng giải thích? Cảm ơn!
Vincent

Tôi có kinh nghiệm trong việc phát triển web và tôi đã gặp rất nhiều người mới bắt đầu thiết kế web. Có những sai lầm phổ biến mà bất cứ ai cũng có thể làm. Ví dụ: pixel thập phân trong kích thước phông chữ. Dịch vụ này có thể giúp người mới.
Nik

Cảm ơn. Tuy nhiên, nó sẽ thực sự hữu ích nếu bạn muốn chia sẻ kinh nghiệm của mình và đánh vần những sai lầm đó. Bằng cách đó, câu trả lời của bạn sẽ vẫn có giá trị (rất nhiều!) Trong trường hợp liên kết bị hỏng sau đó. Thối liên kết là lý do chúng tôi không quan tâm lắm (hầu hết) các anwers chỉ liên kết và lý do tôi bỏ phiếu trả lời của bạn. Đừng nản lòng, xin vui lòng, chúng tôi biết rằng sử dụng trang web này có thể là một đường cong học tập. Chúng tôi rất vui khi có bạn, tiếp tục đóng góp!
Vincent
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.