جاویر قائمی / آیا فتوشاپ مرده است؟
آیا فتوشاپ هنوز هم به عنوان ابزاری مناسب و کارآمد، برای طراحی تایپوگرافی روی صفحات وب شناخته می‌شود؟
به مانند بسیاری از شما، من نیز همواره برای ساخت مدل‌های ترکیبی در طراحی‌هایم از فتوشاپ استفاده می‌کنم. مدت زمان طولانی است که این نرم افزار به عنوان یک استاندارد صنعتی و نرم افزاری از سوی بسیاری از طراحان و همکاران مورد انتخاب و استفاده قرار می‌گیرد.
من هفته‌های بسیاری را صرف طراحی لی‌آوت‌هایی با پیکسل مناسب، گروه بندی عناصر در فولدرهای سلسله مراتبی، و بر چسب زنی همه لایه‌ها، به منظور تبدیل یک مدل زیبا به کدهای تا حد ممکن روان و بدون اشکال کرده‌ام. سپس با اشتیاق، انرژی و هیجان طراحی خود را برای تدوین‌گر عکس توضیح داده، بخش‌های مختلف لایه‌ها را خاموش و روشن کرده و سعی می‌کردم تا دید خود را نسبت به موضوع از طریق تصاویر فتوشاپ بیان کنم، اما همواره کمی مایوس و ناامید می‌شدم، چرا که طراحی درخشان و زیبای من با آنچه روی مرورگر می‌دیدم، تفاوت داشت. البته آنچه می‌دیدم به طراحی من شبیه بود. مثلاً طرح حرف‌ها را می‌شناختم، اما دقت و جذابیتی که من از ترکیب‌هایم به خاطر داشتم در آن دیده نمی‌شد. علت این امر کد گذاری نامناسب تدوین‌گر نبود، بلکه دلیل این تغییرات عدم تبدیل صحیح کدها در تایپوگرافی ساخته شده درون فتوشاپ، به هنگام قرار گرفتن روی بروزر بوده است.
همیشه آنچه می‌بینید، آنچه ساخته‌اید نیست
وقتی به دنبال انتخاب فونت‌ها هستید، مسایلی مهم‌تر از خوانا بودن یا نبودن فونت نیز وجود دارد. این مساله در فتوشاپ چندان دشوار نمی‌نمایاند، چرا که در این نرم افزار همه چیز خوب و عالی به نظر می‌رسد. مهم نیست از چه فونتی و در چه اندازه و وزنی استفاده می‌کنید، به هر حال این فونت روی صفحه به خوبی رندر می‌شود.
متاسفانه، این حالت در بروزر وجود ندارد. معمولاٌ وقتی طراحی ام را روی بروزر می‌بینم، ارتباطات بین عناصر و حروف، نادرست دیده می‌شود. اندازه فونت‌ها و ارتفاع خطوطی که من با توجه به سبک مشخصی روی ترکیب فتوشاپ ایجاد کرده‌ام، با آنچه در بروزر دیده می‌شود، تفاوت دارد. اگر 20 پیکسل حاشیه بالای عنوان در طراحی من وجود داشته، این فاصله با توجه به ارتفاع خط از عنوان، تحت تاثیر اندازه حاشیه، تغییر می‌یابد و این در حالی است که در فتوشاپ چنین اتفاقاتی نمی‌افتد. سپس مجبور می‌شوم تا کار طولانی و کسل کننده تغییر و تنظیم مجدد طراحی را انجام دهم.
همگان از تغییر و تنظیم مجدد طراحی متنفرند
در مواردی که طراح کنار تدوین‌گر می‌نشیند و از او می‌خواهد تا مثلاً ارتفاع خطوط بدنه متن را 2 پیکسل افزایش دهد، یا 1 پیکسل کوچک کند، و . . . ، تدوین‌گر مجبور می‌شود تا فرمان و تغییر CSS را اعمال کند، در این شرایط فقط تدوین‌گر نیست که خسته می‌شود و حتی ممکن است اعتراضش را از طریق فریاد به شما بفهماند، در واقع این نوع فرمان‌ها و تغییراتِ مرحله به مرحله و اندک اندک در CSS و مشاهده نتایج آن روی بروزر زمان‌بر بوده و خلاقیت در کار را کاهش می‌دهد.
تدوین‌گران به سرعت از این تغییرات تکراری که سبب تغییرات جزئی و غیر قابل ملاحظه می‌شوند، خسته شده و طراحان نیز قادر به آزمایش و تجربه سبک‌ها و طرح حرف‌های به سرعت در حال تغییر که می‌توانند رندر بهتری در بروزر داشته باشند، نخواهند بود.
حالا چه باید کرد؟
طراحانی که با CSS آشنایی دارند، خودشان می‌توانند از ابزارهایی نظیر Firebug به منظور انجام موثر تغییرات و تنظیمات مجدد در بروزر استفاده کنند. علاوه بر این با قراردادن همه تغییراتِ CSS در یک داکیومنت میتوانید آنها را برای اجرا در اختیار تدوین‌گر نیز بگذارید.
این کار علاوه بر اینکه به اندازه نشستن در کنار تدوین‌گر و اعمال تغییرات موثر، خستگی تدوین‌گر را به دنبال ندارد، امکان آزمایش اندازه‌ها و سبک‌های بیشتری را قبل از تصمیم‌گیری نهایی برای طراح فراهم می‌آورد. همچنین این ابزار در بررسی و تغییر بخش‌های مختلف HTML و CSS نیز کارایی دارد. به این صورت که تغییرات اعمال شده، همزمان روی بروزر جدید دیده می‌شوند (تغییر دادن تعداد زیادی از عناصر، بدون اینکه بتوان پیاده سازی و اجرای آن را ملاحظه کرد، بسیار خسته کننده است).
می‌توان از ابزار Firediff plug-in به منظور ذخیره کردن نسخه‌هایی از تغییرات اعمال شده در Firebuy نیز استفاده کرد. به این ترتیب نسخه‌هایی از همه تغییرات را روی صفحات مجزا برای استفاده‌های آتی در اختیار خواهید داشت.
مهمترین پیامد این روش این است که وقتی شروع به نشان دادن فونت‌های شبکه‌ای درون رابطه می‌کنید، وقتی فونت‌های انتخابی روی type kit نصب می‌شوند، روی بروزر دیده نخواهند شد. البته در این شرایط کار کمی دشوار‌تر می‌شود و آزادی عمل کمتری در آزمایش فونت‌های مختلف خواهید داشت.
طراحی در بروزر
سرویس‌هایی نظیرTypecast ، کار با فونت‌های شبکه را برای طراحان ساده‌تر کرده‌اند و من بسیاری از تایپوگرافی‌هایی درون شبکه‌ای را با استفاده از آنها انجام می‌دهم.
این سرویس‌ها، امکان ایجاد مدل‌های تایپوگرافی (درست به مانند فتوشاپ) با استفاده از رابط‌های گرافیکی بصری به منظور تعیین فونت، سبک، وزن، رنگ، ارتفاع خطوط، حاشیه و دیگر عناصر مرتبط با تایپوگرافی را برای شما فراهم می‌آورند.
بهترین مزیت استفاده از Typecast این است که همه کارها درون بروزر انجام می‌شود و به این ترتیب می‌توان تصمیم‌گیری‌های دقیقی در مورد حروف و نحوه ارائه آن ها به کاربر داشت. مثلاً چنانچه یک فونت مشخص با 19 پیکسل نمای خوبی ندارد، با کلیک روی یک دکمه آن را تبدیل به 20 پیکسل کنید یا اینکه دوباره آن را روی 19 پیکسل یا حتی 18 پیکسل تنظیم کنید. همه این کارها ظرف مدت چند ثانیه انجام می‌شود و لازم نیست ساعت‌ها در کنار تدوین‌گر به انجام آنها بپردازید.
میتوانید از فونت‌های ارائه شده وب سایت‌ها، نظیر فونت‌های google، typekit و ... که مجموعه‌هایی با 23000 فونت مختلف در اختیار دارند، استفاده کنید (این فونت ها جدیداً از سوی monotype خریداری شده و بنابراین، به زودی مشاده فونت‌های بسیاری را بر سر راه خود انتظار داریم).
به نظر من typecast، با ترغیب کردن افراد به تجربه و امتحان فونت‌های مختلف سبب ایجاد مفهوم سر زندگی و جذابیت در تایپوگرافی شده است. چراکه تجربه فونت‌هایی مختلف در صورتی که به سادگی در دسترس نبوده یا به آسانی قابل تبدیل نباشند، هرگز پدید نمی‌آید.
دیگر ویژگی کارآمد typecast امکان مشاهد و ویرایش CSSهر نسخه تایپی است. شما میتوانید با ویرایش بسیار ساده‌ای روی پنلِ CSS، تصاویر و رنگ‌ها، حالت‌های Hover و یا هر نوع تغییری را به پس زمینه اضافه کنید.
چنانچه از تغییرات اعمال شده راضی بودید، میتوانید به سادگی کد CSS مربوط را صادر و ذخیره کنید. به این ترتیب، امکان آپلود کردن روی سایت یا ارسال برای تدوین‌گر فراهم می‌آید و از آنجا که همه چیز در بروزر طراحی شده است، دقیقاً به همان صورتی که مد نظر شما است، ظاهر خواهد شد.
مرا در CSS نخواهید یافت
فتوشاپ فاقد استاندارد صنعتی برای ذخیره و ثبت است و برخی از ما وقتی به فکر طراحی در بروزر می‌افتیم، نفسمان در سینه حبس می‌شود. چرا که قرار است طراحانی خلاق باشیم نه برنامه نویس نرم افزار!
البته نگران نباشید، چراکه هنوز هم روش‌هایی برای ایجاد تایپوگرافی‌های زیبا با استفاده از فونت‌های شبکه‌ای در فتوشاپ وجود دارد.
Extensis، پلاگینی را طراحی کرده است که روی نسخه‌های CSS5 یا بالاتر فتوشاپ نصب شده و دسترسی به فونت‌های شبکه‌ای google و webink را به منظور استفاده مستقیم و رایگان در درون فتوشاپ امکان پذیر می‌سازد.
به این صورت، میتوانید علاوه بر فونت‌های نصب شده روی سیستم‌تان، از هر فونت شبکه‌ای google یا در ترکیب‌های طراحی خود استفاده کنید و مستقیماً نحوه نمایش آنها را روی بروزر ببینید.
این پلاگین دسترسی به فونت‌های شبکه‌ای google یا WebINK را در لحظه ممکن خواهد ساخت، و امکان به روز رسانی فونت‌های جدید روی مجموع برنامه‌های فونت قدیمی، به صورت خودکار را نیز دارد.
فتوشاپ را روشن کنید
پلاگین مناسب دیگری که به گذار بین ترکیب‌های فتوشاپی و CSS سازگار بروزر کمک کند، پلاگین ابری و رایگان قابل دانلود از css3ps.com می‌باشد.
یکی از مهمترین دلایل بکارگیری فتوشاپ از سوی طراحان امکان کنترل روی همه لایه‌ها و عناصر قالبی و شکلی است.
علاوه بر این، توانایی آزمایش و تجربه سریع و آسان روی سایه‌ها، انعکاس‌ها، رنگ‌ها و بافت‌ها، گوشه‌های دایره‌ای شکل و دیگر عناصر، ویژگی دیگری است که طراحان را به کار در محیط فتوشاپ ترغیب و از بروزرها دور می‌کند.
با توجه به این مسائل، این پلاگین جدید، بسیار مناسب و کارا است، چرا که از یک سو به شما امکان می‌دهد تا ترکیب‌های خود را با روش‌هایی که با آن آشنایی کامل دارید، طراحی کنید و از سوی دیگر، به سادگی امکان مشاهده فرم تبدیل شده سبک‌های شِکلی خود را در CSS سازگارِ بروزر خواهید داشت.
این روش، برای طراحی دکمه‌ها، نشانه‌های راهنما و یا هر چیز دیگری که به فرم اشکال هندسی است، بسیار ایده‌آل می‌باشد.
درست است که فتوشاپ هنوز هم نقش ابزاری خود را در طراحی لی‌آوت‌های شبکه‌ای حفظ کرده، اما در طراحی تایپوگرافی برای شبکه‌ها، اپ‌هایی نظیر Firebug و typecast آن را کنار خواهند زد.
زمانی که فتوشاپ صرف به روز رسانی ترکیب‌های ایستا می‌کند، قابل مقایسه با سرعت و سهولتی که برای انجام تغییرات در بروزر می‌شود، نیست. برای کسانی که نمی‌توانند حتی برای لحظه‌ای ایده طراحی در بروزر را قبول کنند، پلاگین‌های معرفی شده در این مقاله، حداقل فتوشاپی را به آنها ارائه می‌کند که ترقی لازم برای کارا بودن و انتقال آسان را در خود دارد.
سراجا منیرا