آیا فتوشاپ مرده است؟

من حدس می‌زنم عنوان مناسب‌تر می‌تواند این باشد که “آیا فتوشاپ هنوز ابزار مناسبی برای طراحی تایپوگرافی در وب است؟” اما این فاقد جذابیت چشمگیر موارد فوق است.

من هم مانند بسیاری از شما، همیشه از فتوشاپ برای ایجاد ترکیبات ماکتی از طرح هایم استفاده کرده ام. تا زمانی که یادم می‌آید، این نرم‌افزار استاندارد صنعتی و نرم‌افزار انتخابی اکثر طراحانی بوده است که با آنها کار کرده‌ام. من هفته‌ها را صرف طراحی طرح‌بندی‌های بی‌نقص پیکسل، گروه‌بندی عناصر در پوشه‌های سلسله مراتبی و برچسب‌گذاری تمام لایه‌هایم کرده‌ام تا انتقال از ماکت‌آپ زیبا به کد را تا حد امکان روان انجام دهم.

من پر از اشتیاق، انرژی و هیجان می‌شوم که طرح‌هایم را برای یک توسعه‌دهنده توضیح می‌دادم، حالات لایه‌ها را روشن و خاموش می‌کردم تا دیدم را از طریق فتوشاپ نشان دهم، اما همیشه کمی ناامید می‌شوم زیرا طرح براق و صیقلی من به چیزی تبدیل شد. من در مرورگر می بینم. مطمئناً، شبیه طراحی من است… و من به نوعی فونت‌ها را تشخیص می‌دادم، اما فاقد آن وضوحی بود که از ترکیب بندی‌هایم به خاطر داشتم. نه این که توسعه دهندگان آن را به خوبی کدگذاری نکرده بودند، بلکه تایپوگرافی که من در فتوشاپ ایجاد کرده بودم به کد ترجمه نشده بود.

آنچه می بینید همیشه آن چیزی نیست که به دست می آورید

هنگام انتخاب فونت موارد کمی مهمتر از این است که یک فونت به راحتی خوانا باشد یا نه در فتوشاپ، این مشکل چندانی ندارد زیرا همه چیز عالی به نظر می رسد. مهم نیست از چه فونتی استفاده می‌کنید، با چه اندازه یا وزنی (در حد منطق) زیرا کاملاً روی صفحه نمایش داده می‌شود.

متأسفانه، این به مرورگر گسترش نمی یابد. اغلب هنگام مشاهده طرح من در مرورگر، روابط بین عناصر و نوع اشتباه بود. اندازه فونت و ارتفاع خطوطی که در ترکیب فتوشاپ خود به سبک‌ها نسبت داده بودم مانند مرورگر نیست. اگر من یک حاشیه 20 پیکسلی بالای عنوان در طرح هایم تعیین می کردم، این فاصله ممکن است تغییر کند زیرا ارتفاع خط هدر روی اندازه حاشیه تأثیر می گذارد، چیزی که در فتوشاپ اتفاق نمی افتد. سپس باید روند طولانی و خسته کننده “ترفندهای طراحی” وحشتناک را شروع کنم.

 

همه از ترفندهای طراحی متنفرند

به من اعتماد کنید این فقط توسعه دهنده نیست که از این ایده که یک طراح در کنار آنها بنشیند و از آنها بخواهد “ارتفاع خط کپی بدنه را دو پیکسل افزایش دهند” طفره می رود و سپس توسعه دهنده را مجبور می کند که CSS را تغییر دهد و متعهد شود …. وارد. «در واقع، 1 پیکسل کوچکتر» … وارد کنید. “شاید اینطوری که بود بهتر بود”. این نوع بهینه سازی ذره ذره CSS برای دیدن نتایج در زمان واقعی از طریق مرورگر زمان بر است و برای خلاقیت مفید نیست. توسعه‌دهندگان به‌سرعت خسته می‌شوند که روز را به طور مکرر تغییر دهند که جزئی‌ترین جزئیات را تغییر می‌دهند، و طراحان نمی‌توانند با تغییر سریع و آسان حروف و سبک‌هایی که در مرورگر بهتر ارائه می‌شوند، آزمایش کنند.

 

خب حالا چی؟

برای طراحانی که درک درستی از CSS دارند، می‌توانید از ابزارهایی مانند Firebug برای ساخت مؤثر استفاده کنید. طراحی خود را در مرورگر اصلاح می‌کند و تمام تغییرات CSS را در یک سند یادداشت می‌کند و سپس می‌توانید برای پیاده‌سازی آن را به یک توسعه‌دهنده انتقال دهید. این در واقع مانند نشستن با یک توسعه دهنده و ایجاد تغییرات CSS است، اما برای توسعه دهنده بسیار خسته کننده تر است و همچنین به طراح اجازه می دهد قبل از تصمیم گیری، اندازه ها و سبک ها را بیشتر آزمایش کند. اگرچه این ابزار خوبی برای بازرسی و تغییر بخش‌هایی از HTML و CSS است، اما به محض اینکه مرورگر به‌روزرسانی شود، تغییراتی را که انجام می‌دهید از دست خواهید داد، که اگر عناصر زیادی را تغییر داده باشید و تمام موارد خود را یادداشت نکنید، می‌تواند بسیار آزاردهنده باشد. تنظیمات.

می‌توانید از افزونه Firediff برای ذخیره رکوردی از همه تغییراتی که در Firebug انجام می‌دهید، که بسیار عالی است زیرا باعث می‌شود تا مجبور نباشید هر تغییری را در صفحه‌گسترده جداگانه‌ای برای بعد یادداشت کنید. بزرگترین مشکل این روش زمانی است که شما شروع به معرفی فونت های وب به معادله می کنید زیرا هر فونت انتخابی باید در کیت نوع شما نصب شود وگرنه در مرورگر ظاهر نمی شوند. این امر باعث می‌شود که آزمایش آسان با فونت‌های مختلف کارها بسیار دشوارتر و کمتر آزاد باشد، زیرا نمی‌توانید فونت‌ها را به سرعت آزمایش کنید.

 

طراحی در مرورگر

سرویس‌هایی مانند Typecast کار کردن با فونت‌های وب را برای طراحان بسیار آسان‌تر می‌کند و من تقریباً تمام تایپوگرافی خود را برای وب با استفاده از آن انجام دهم. این به شما امکان می‌دهد تا با استفاده از رابط بصری خود، ماکت‌های تایپی (درست مانند فتوشاپ) ایجاد کنید تا فونت‌ها، سبک‌ها، وزن‌ها، رنگ‌ها، ارتفاع خط، حاشیه، بالشتک و موارد دیگر را به تایپوگرافی خود اختصاص دهید. بهترین چیز در مورد استفاده از Typecast این است که همه آنها در مرورگر کار می کنند، بنابراین شما دقیقاً همانطور که برای کاربر ارائه می شود تصمیم می گیرید. آیا فونت خاصی در 19 پیکسل خیلی داغ به نظر نمی رسد؟ با یک کلیک آن را به 20 برسانید، قبل از اینکه در نهایت به اندازه 18 پیکسل برسید، به 19 برگردید، همه این کارها در چند ثانیه انجام می شود و نه ساعت ها با یک برنامه نویس.

شما می‌توانید از هر فونت وب از مجموعه‌های 23000 قلمی آن‌ها، از جمله فونت‌های Google، Typekit و موارد دیگر در ترکیب‌بندی‌های خود استفاده کنید، که آزمایش را سریع و آسان می‌کند (آنها اخیراً توسط Monotype که صاحب Fonts.com و Myfonts هستند خریداری شده‌اند، بنابراین انتظار دارید فونت های بسیاری دیگر به زودی در راه است). به نظر من تایپ‌کست مفهوم بازیگوشی را به تایپوگرافی بازمی‌گرداند، زیرا شما را تشویق می‌کند تا انواع فونت‌ها را امتحان کنید، که اگر به راحتی در دسترس نبودند و به راحتی قابل تعویض نبودند، هرگز آن‌ها را کشف نمی‌کردید.

یکی دیگر از ویژگی های بسیار مفید typecast امکان مشاهده و ویرایش CSS نوع خود است. می‌توانید رنگ‌ها و تصاویر پس‌زمینه، وضعیت‌های شناور یا حتی انتقال‌ها را به سادگی با ویرایش پنل CSS اضافه کنید. هنگامی که از ایجاد خود راضی هستید، می توانید به راحتی کد CSS را صادر و ذخیره کنید، که سپس می تواند در سایت شما آپلود شود یا برای یک توسعه دهنده ارسال شود و چون همه چیز در مرورگر طراحی شده است دقیقاً همانطور که قصد دارید ظاهر می شود.

 

تو من را در CSS از دست دادی

فتوشاپ استاندارد صنعتی نیست، و برخی از شما با فکر انداختن آن برای طراحی در مرورگر، تهویه بیش از حد در آنجا خواهید بود، بالاخره ما خلاق هستیم نه کدنویس. خوب، کیسه کاغذی را زمین بگذارید زیرا هنوز راهی برای ایجاد تایپوگرافی زیبا با استفاده از فونت های وب در فتوشاپ وجود دارد. Extensis افزونه‌ای ایجاد کرده است که می‌تواند در فتوشاپ نسخه‌های CS5 و بالاتر نصب شود. به شما امکان دسترسی به تمام فونت های WebINK و Google Web را می دهد تا به طور رایگان مستقیماً در داخل فتوشاپ استفاده کنید.

این بدان معناست که می‌توانید از هر یک از فونت‌های WebINK یا Google در ترکیب‌های طراحی خود مانند فونت‌هایی که روی سیستم شما نصب شده‌اند استفاده کنید و تقریباً همان چیزی را که باید در مرورگر به نظر می‌رسد نمایش می‌دهند. این افزونه در حال حاضر فقط به شما امکان دسترسی به فونت‌های وب WebINK و Google را می‌دهد، اما از طرف دیگر، فونت‌های جدید را به‌طور خودکار به‌روزرسانی می‌کند که به WebINK و کتابخانه فونت‌های Google اضافه می‌شوند.

 

روشن شدن فتوشاپ

یک افزونه ارزشمند دیگر که به سهولت انتقال بین ترکیبات فتوشاپ و CSS سازگار با مرورگر کمک می کند، افزونه رایگان و مبتنی بر ابر از css3ps.com. یکی از دلایل اصلی که بسیاری از طراحان با فتوشاپ کار می کنند، کنترل شما بر روی لایه ها و عناصر شکل است. امکان آزمایش آسان و سریع با سایه، درخشش، رنگ، بافت، گوشه‌های گرد و موارد دیگر تقریباً طبیعت دوم برای اکثر افراد است و چیزی است که حتی طراحان باتجربه برای تکرار دقیقاً در مرورگر تلاش می‌کنند. برای آن‌ها، این افزونه عالی است زیرا به شما امکان می‌دهد ترکیب‌های خود را به روشی که بهتر می‌دانید ایجاد کنید، اما سپس به شما اجازه می‌دهد سبک‌های شکل خود را به راحتی به CSS3 سازگار با مرورگر تبدیل کنید. این روش برای طراحی دکمه‌ها، پیمایش یا هر چیز دیگری که ممکن است شکلی برای آن طراحی کرده باشید ایده‌آل است.

شاید فتوشاپ هنوز نقشی به عنوان ابزاری برای طراحی طرح‌بندی وب داشته باشد، اما تا آنجا که طراحی تایپوگرافی برای وب، برنامه‌هایی مانند Firebug و Typecast از آن پیشی گرفته‌اند. زمان لازم برای به روز رسانی ترکیبات استاتیک با سرعت و سهولتی که می توانید در مرورگر ایجاد کنید قابل مقایسه نیست. برای آن دسته از شما که حتی نمی توانید ایده طراحی در مرورگر را سرگرم کنید، افزونه های بالا حداقل باید به فتوشاپ تقویت شود تا مرتبط بماند و به سهولت انتقال کمک کند.

 

آیا از فتوشاپ برای طراحی سایت استفاده می کنید؟ آیا فتوشاپ راه فلش را می رود؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، از تصویر مرده از طریق Shutterstock.