آیا امکان طراحی سایت با فتوشاپ وجود دارد؟

طراحی سایت به طور کلی دارای دو بخش Front-end و Back-end می باشد. در قسمت Front-end سایت آن چیزی که توسط کاربر در مرورگر اینترنتی قابل مشاهده است المان های بصری و طرح بندی بسیار با اهمیت می باشد و نقش مهمی را در کلیک کردن کاربر یا درگیر تعامل شدن وی با سایت را دارد. برای توسعه Front-end می توان از کدنویسی در یک برنامه ویرایشگر ساده سود برد و یا می توانید از امکانات ابزارهای حرفه ایی تر استفاده کنید. در این مقاله از دارکوب می خواهم به معرفی امکانات، قدرت و ضعف فتوشاپ در توسعه وب سایت بپردازم. اگرچه فتوشاپ برای توسعه وب سایت شهرت ندارد و شاید مورد علاقه برخی از طراحان و پاسخ دهنده برخی نیاز های توسعه نباشد با این حال این برنامه قدرتمند از شرکت Adobe قسمت های از کار توسعه Front-end سایت را برای طراحان ساده و سریع تر کرده است.

مقدمه ایی به فتوشاپ

فتوشاپ برای طراحی لوگو و پوستر و ویرایش عکس توسعه داده شد. اما توانایی آن به حوزه توسعه وب سایت نیز ادامه پیدا کرد. و امروز برخی توسعه دهندگان می توانند از فتوشاپ برای توسعه مدل (mock-up) طرح بندی (layout) وب سایت و حتی تولید کد از طراحی استفاده کنند.

شرکت ادوب در واقع برای نظر عموم توجه کرده و سعی نموده تا قدمی در زمینه توسعه وب با کمک ابزار فتوشاپ بردارد. بدین جهت آن ها چندین ابزار را در جهت توسعه وب بهبود داده اند.

شکی نیست که طراح حرفه ایی می تواند با استفاده از یک ویرایشگر متن ساده مانند Notepad یک صفحه وب سایت زیبا را توسعه دهد. اما از سوی دیگر فتوشاپ پر از ابزار ها، ترفند ها و میان بر ها برای توسعه وب است. طبق تجربه فتوشاپ این امکان را فراهم می کند که طراح سایت پیش از مرحله کد نویسی 100% مدل را فراهم کند و امروز ابزاری ضروری از توسعه، طراحی و بهینه سازی وب است.

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

فتوشاپ با امکان ارائه کدهای CSS از تصاویر و طراحی ها، نمونه سازی و غیره می تواند در فرایند طراحی Front-end به کمک توسعه دهنده گان وب سایت بیاید. خیلی کار ها با کد نویسی ممکن است اما در فتوشاپ سرعت و راحتی کار است که به کمک طراح می آید.

چرا فتوشاپ

طراحان وب می توانند از برنامه های مختلفی برای انجام کار استفاده کنند. مثلا برخی از طراحان با استفاده ازAdobe Illustrator (AI)  و حتی Adobe InDesign برای نمایش بصری سایت به مشتری و توسعه دهنده گان وب استفاده می کنند.

برای راحت سازی طراحی و انتقال آن به HTML شاید فتوشاپ بهترین باشد و پس از آن Illustrator و InDesign قرار می گیرند. منظور این نیست که InDesign برنامه خوبی نیست. اما این برنامه برای محصولات چاپی توسعه داده شده است و به نظر نمی آید که در توسعه وب سایت نقشی داشته باشد.

من از Illustrator استفاده کردم و سعی نمودم که در امکانات ارائه شده در آن به دنبال چیزی برای راحت کردن کار هایم بیابم، اما کاربرد آن زیاد هم طول نکشید چون این نرم افزار چیزی کم دارد که فتوشاپ آن را دارد. و آن پیکسل است. البته که در Illustrator هم از پیکسل استفاده شده است اما تفاوتی در این دو نرم افزار است. وقتی که یک طراح می خواهد یک Front-end را توسعه دهد از سیستم پیکسل استفاده می کند روشی مرسوم در بین طراحان. اما در Illustrator شما هیچ وقت نمی توانید درک خوبی از پیکسل داشته باشید. شاید عجیب باشد اما با زوم کردن متوجه تفاوت فتوشاپ و Illustrator خواهید شد. در فتوشاپ در هر حالتی مقیاس و پیکسل مشخص هستند. اما در استفاده از Illustrator با استفاده از “one pixel rule” شما حس می کنید بجای یک پیکسل دو پیکسل دارید. در مجموع وقتی در این دو نرم افزار دقیق می شوید متوجه تفاوت آن ها در مدیریت پیکسل خواهید شد.

با استفاده از Smart Object و قرار دادن Element ها در یک طراحی Global بسیاری از طراحان هدر ها، footer ها و سایر اجزا را جدا از هم نگه می دارند. اگر یک مشتری بخواهد که تغییری در یکی از این قسمت ها بدهد آن وقت شما باید آن را فقط در یک قسمت اعمال کنید. این یکی از خصوصیات عالی فتوشاپ در طراحی است.

فتوشاپ کار را در جهت دیگر نیز بسیار راحت کرده است. با اینکه CSS طراحی را آسان کرده است اما با این حال شما برای خطوط مورب و بعد دادن به تصویر با کمک فتوشاپ بسیار راحت تر هستید. و اینجاست که باز استفاده از مقیاس پیکسل به شما در طراحی و محاسبه و ابعاد یک طرح بندی HTML به کمک شما می آید و یک انتقال آسان به HTML را فراهم می کند.

راحتی تنظیم رزولوشن

وقتی شما با ابزارهای طراحی تمپلیت های حرفه ایی وب سایت کار می کنید، بسیار مهم است که یک طراحی دقیق داشته باشید. فتوشاپ ابزاری است که به شما انواع مقیاس های مختلف را با استفاده از سیستم برداری ارائه می دهد. این به شما کمک که می کند تصویری از نمایشگر ها با سایز و کیفیت های متفاوت داشته باشید. از همه مهم تر این است که این ابزار برای شما امکان طراحی واکنش گرا یا Responsive را ممکن می سازد.

فرمت های مختلف

فتوشاپ در بهینه سازی تصاویر در فرمت های مختلف به شما کمک می کند. این ابزار از فرمت های SVG، PNG، GIF و JPG و غیره پشتیبانی می کند. این برنامه همچنین برای ذخیره کردن به فرمت های مختلف دارای خروجی های متنوع پیش فرض نیز می باشد.

تنوع فونت

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

آسانی استفاده از Pixel Perfection

طراحی شبکه Grid  هنوز هم در این روز ها بسیار پر طرفدار است شاید که انجام تغییر و ویژه سازی را برای طراح آسان تر کرده است. فتوشاپ نیز دارای یک امکان خلاقانه برای شبکه روان یا  Fluid است که طراح را در جهت مطابق سازی و تغییر در این سیستم یاری می دهد.

این ویژگی برای شما فضاهای رنگی و واحد های پیکسلی، طراحی هایی با سایز ها و تنظیمات مختلف با کمک متد های Aligning New Objects to Pixel Grid  ایجاد می کند.

مناسب برای طراحی Responsive و Wireframe

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

کار راحت تر با Raster

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

اما فقط تصاویر Vector کافی نیست، گاهی اوقات شما همچنین نیاز به تصاویر Raster Images در قالب طراحی حرفه ای وب سایت خود دارید که در ویرایش، ساخت فایل های PSD، پشتیبانی از ترکیب لایه ها و غیره کمک می کند. این محتوا را می توان به راحتی برای استفاده در وب بهینه سازی کرد.

مشابه همین، Retina Image نیز این روزها بسیار متداول هستند که به معنی چندین نسخه از هر تصویر، از تراکم دو برابر پیکسل است. که این امر می تواند به راحتی توسط Adobe Photoshop به راحتی حاصل شود.

صرفه جویی در زمان

فتوشاپ همچنین ابزارهای زیادی برای طراحی وب در اختیار شما قرار می دهد که در زمان شما بسیار صرفه جویی می شود. برخی از این امکانات عبارتند از fonts, graphic styles, global swatches, live shapes, dynamic buttons.

این امکانات به شما کمک می کنند که از تصاویر و کارهای هنری داینامیک چندین بار (در یک یا چند صفحه) استفاده کنید و در ضمن یکپارچگی کار را نیز حفظ نمایید. مثلا اگر از امکان 9-Slice Scaling استفاده نمایید و کار یا تصویر شما به 9 قسمت مختلف تقسیم شود، شما می توانید مقیاس و یا شبکه (Grid) را به صورت لایه و مستقل پیاده سازی نمایید.

متن و تصاویر اختصاصی

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

اشکال زنده

فتوشاپ به شما امکان ایجاد و ویرایش تصاویر را به گونه ایی می دهد تا حس زنده بودن را ایجاد کند. یکی از این ویژگی های اشکال زنده لبه های گرد تصاویر است. شما می توانید این امکانات را برای یک تصویر و یا قالب کلی صفحه به کار برید. همچنین در Transform panel می توانید ویرایش های بیشتری را بر روی این ویژگی (Live Shape) انجام دهید.

Global Swatches

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

امکان یکپارچه سازی فریم ورک ها

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

امکان نمونه سازی تعاملی

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

آسانی استخراج کردن CSS

این امکان بسیار جذابی برای طراحی وب سایت است. شما با فتوشاپ می توانید کد های CSS را از تصاویر، متن و محتوا استخراج کرده و برای کد نویسی به یک ویرایشگر کد ببرید. این امکان برای توسعه دهنده گان Front-end در وب سایت بسیار با ارزش است. همچنین در کنار استخراج کد این برنامه به شما این امکان را می دهد که قسمت های مختلف طراحی وب سایت خود را که در فتوشاپ انجام شده را به صورت فایل های تصویری PNG نیز ذخیره و استفاده نمایید.

پلاگین های فتوشاپ برای طراحی سایت

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

HTML BLOCK

برخی می گویند که کد و فتوشاپ زیاد با هم رابطه خوبی ندارند. اما این حرف درست نیست. اگر شما HTML BLOCK را برای فتوشاپ نصب نمایید این افزونه از موتور WebKit برای رندر HTML و CSS بطور ویژه ایی استفاده می کند. این پلاگین برای استفاده از فونت ها و داشتن یک دید زنده بلافاصله به صفحه وب به شما کمک می کند.

PAGE LAYERS

اگر شما طراحی در مرورگر اینترنتی را دوست دارید اما یک فایل فتوشاپ از کار خود می خواهید پس PAGE LAYERS را امتحان کنید. این افزونه می تواند که یک صفحه وب را به فایل فتوشاپ تبدیل نماید و به شما لایه های و المان های جداگانه نامگذاری شده را ارائه دهد. همچین این ابزار می تواند در طراحی دوباره یا بهبود طراحی موجود به شما کمک کند. این افزونه حتی نسخه ایی برای مک دارد که البته باید آن را خریداری کنید.

BJANGO ACTIONS

BJANGO ACTIONS یک افزونه متن باز است که حاوی اکشن ها و اسکریپ های آماده برای پروژه وب شما می باشد. علاوه بر این می تواند به شما برای موقعیت طرح در صفحه و قطعه بندی به طور موثرتری به شما کمک کند.

DITTO

این پلاگین به شما این امکان را می دهد که از متغییر های برای المان های طراحی مانند رنگ، رشته های متنی، سایز ها و موقعیت ها و حتی وضوح استفاده نمایید. البته برای همه اجباری نیست که فایل PSD را ویرایش کنند ولی با این حال امن ترین روش است.

RENAMY

اگر شما چندین لایه در طراحی خود دارید اما نمی خواهید که آن را به طور دستی ویرایش کنید پس بهتر است که این پلاگین را نصب نمایید. این پلاگین به شما اجازه می دهد که چندین لایه را انتخاب و نام آن ها را تغییر دهید آن هم فقط با یک کلیک. البته این پلاگین در ورژن رایگان دارای محدودیت پنج آیتم به طور همزمان است که در نسخه اصلی محدودیتی از این بابت وجود ندارد.

DUPLLLICATOR

این پلاگین بهترین دوست شما در دسته بندی و قفل کردن لایه های طراحی است. شما تنها باید لایه ها و کپی ها را انتخاب کرده و فضای خالی را مشخص کنید. این پلاگین از ورژن Photoshop CC 2014 به بعد قابل استفاده است.

MAGIC WAND TRICKS

این پلاگین که در اصل اضافه ایی به ابزار Magic Wand در درون فتوشاپ است، به شما امکانات بیشتری از حالت معمول می دهد. آیا می دانستید که این ابزار در ایجاد برش ها عالی است؟ همچنین می توانید لایه ها و گروه ها را به سرعت در مرکز قرار دهید و در کنار پنل هیستوگرام، حتی می توانید شمارش تعداد پیکسل ها را در انتخاب داشته باشید.

Sketch یا فتوشاپ

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

طرفداران اسکچ

همه چیز Vector است: این مثل یک رویا است. شما می توانید اشیاء را بر روی بوم مجددا تغییر اندازه بدهید بدون اینکه کیفیت کار یا زمان خود را از دست بدهید. یکی دیگر از چیزهای مهم در مورد Sketch کار با پیکسل است. حتی اگر شما با Vector مشغول به کار هستید، همه چیز به راحتی به یک شبکه پیکسل که برای طراحی وب مناسب است قابل تبدیل می باشد.

نشانه های راهنمای هوشمند: شما در اسکچ می توانید به راحتی المان ها را مرتب سازی نمایید. دلیل آن وجود نشانه هایی است که با کمک موس و کلید Alt می توانید هر فضایی را نشانه روید. امکانی که تنها در ورژن های اخیر فتوشاپ وجود دارد.

شبکه (Grid) درون سازی شده: بدون شبکه ساخت وب سایت بسیار دشوار و تقریبا غیر ممکن است. شاید شما از کپی کردن شبکه از کاری به کار دیگر خسته شده اید. خوشبختانه در اسکچ این امکان درون سازی شده و شما می توانید آن را به راحتی هر گونه که تمایل داشتید ویرایش و تغییر دهید.

چند تصویری: از آنجایی که اسکچ به شما چندین بوم برای کار می دهد. شما می توانید چندین کار ایجاد و در حالات مختلف طراح های خود را ببینید. این امکان در طراحی واکنش گرا Responsive بسیار کار را برای شما آسان می کند.

پردازش فونت برای وب: هیچ چیز بدتر از این نیست که شکل و اندازه فونت های شما متفاوت از آنچه در فایل PSD است در صفحه وب نمایش داده شود. اسکچ توانسته با تدابیری این تجربه در محیط به گونه ایی یکسان و پایدار کند. (البته این مسئله در فتوشاپ با کمک پلاگین ها قابل مدیریت است)

استخراج آسان تر: اگر کسی در تیم طراحی شما از اسکچ استفاده نمی کند، نگران نباشید خوشبختانه این نرم افزار انواع مختلف خروجی را به راحتی برای شما فراهم می کند.

سریع تر: کسانی که تجربه کار با فتوشاپ برای طراحی وب را دارند گاه از ناسازگاری پلاگین ها و باگ هایی که باعث کاهش سرعت و بسته شدن پروژه می شود شکایت دارند. اسکچ از نظر سایز و حافظه مورد نیاز بسیار سبک تر و سریع تر از فتوشاپ برای شما کار خواهد کرد. چون اسکچ ابزارهای اضافی فتوشاپ را ندارد ابزارهایی زیاد هم به طراحی وب نمی آیند.

مخالفان اسکچ در برابر فتوشاپ

باگ: با اینکه یکی از خوبی های اسکچ سرعت و سبک تر بودن آن است. اما با این حال این برنامه نیز بدون باگ نمی باشد. گاه پیش می آید برای ذخیره کرده فایل در SVG یا تغییرات عادی برنامه دچار کرش می شود.

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

جایگزین همه برنامه ها نیست: اسکچ تنها برای طراحی وب است. کیفیت کارها در این برنامه بیشتر از 72dpi نمی باشد. بنابراین شما نمی توانید به آن لوگو طراحی کنید. در یک کلام با اسکچ شما هنوز هم به برنامه های Adobe نیاز دارید.

زمان یادگیری: از آنجایی که فتوشاپ برنامه ایی معروف تر و قدیمی تر است. تقریبا بیشتر کاربران و طراحان با آن آشنایی دارند. یادگیری هر برنامه و حرفه ایی شدن در آن تا حد زمان بر و چالش بر انگیز است. اگرچه اسکچ برای یادگیری خیلی هم دشوار نیست اما با این حال این مورد را باید در نظر گرفت.

شاید فواید اسکچ برای طراحی سایت بیشتر از سختی های آن باشد. از یک طرف این برنامه امکانی را ارائه داده که در سایر برنامه ها دیده نشده است و از طرف دیگر مانند هر برنامه دیگر دارای محدودیت هایی می باشد. با این حال اسکچ در چند سال اخیر توانسته رشد خوبی را از نظر تعداد کاربر بدست آورد و این برنامه هنوز جای رشد دارد. اما عده ایی آن را برنده رقابت با فتوشاپ در طراحی وب می دانند.

چطور سریع تر از فتوشاپ استفاده کنیم

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

فایل های خود را مرتب نگه دارید

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

درک فریم ورک

هر فریم نقاط قوت و ضعفی دارد. اما از آن مهم تر این است که آیا شما با فریم ورکی که کار می کنید آشنایی لازم را دارید یا خیر؟ امروز بوت استرپ و فاندیشن سهم زیادی از بازار را به خود اختصاص داده اند. این دو در سیستم Grid خوب عمل می کنند. اما فتوشاپ هم یک سیستم طرح بندی راحت و چالاک دارد که نه تنها می توانید با آن Grid را به راحتی ایجاد نمایید بلکه می توانید قطعات کار خود را به راحتی به آن اضافه کرده و در صورت نیاز باز سازی نمایید. همچنین فتوشاپ امکانات خوبی برای استایل و فرم ها دارد که می توانید برای سرعت دادن به کار خود از آن ها استفاده نمایید.

لایه ها را با قسمت های محتوا سازمان دهید

وقتی با یک طراحی وب PSD پیچیده با کلی لایه، فلدر، آبجکت و غیره سر و کار دارید خیلی راحت است که کار شما شلوغ و به هم ریخته شود. برای همین پیشنهاد می دهم که PSD خود را با Section ها نظم دهید.

شما می توانید که کار را با ساختار فلدر انجام دهید یا اینکه هر لایه را به طور جداگانه نام گذاری کنید. البته نام گذاری لایه ها کار زمان بری است اما در نهایت کار کردن با آن آسان تر می شود.

میانبرهای را یاد بگیرید

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

از کتابخانه های CC استفاده کنید

یکی از امکانات عالی که ادوب به فتوشاپ اضافه کرده همین کتابخانه CC است. پس اگر تا الان از آن استفاده نکرده اید سری به برنامه وبلاگ های آموزشی در این زمینه بزنید. این کتابخانه مسیر کار را با کمک استایل ها، عکس ها، آیکون ها، نماد ها هموار کرده است. استفاده از آن آسان بوده و طراحی آن بسیار متنوع و خلاقانه می باشد.

شما به راحتی می توانید در این کتابخانه طرح ها و رنگ ها را تغییر دهید. از همه مهم تر اینکه شما می توانید با تغییر مثلا یک آیکون آن را در سایر بخش ها نیز تغییر دهید. این بخصوص برای طراحی سربرگ و پاصفحه های مفید است. همچنین این امکانات در زمینه مدیریت فونت ها بسیار به کمک شما می آید.

این کتابخانه همچنین در زمینه کار گروهی بسیار به کمک شما می آید. هر کس می تواند قسمتی از آن را طراحی یا ویرایش کرده در اختیار سایر اعضای گروه قرار دهد. حتی شما می توانید این کتابخانه را برای کار خود سفارشی کنید.

متاسفانه این کتابخانه ضعف هایی هم دارد و آن عدم و جود استایل جداگانه کاراکتر و پاراگراف است. و مسئله دیگر این که شما نمی توانید به صورت کلی یا همان Global استایل متن را ویرایش کنید.

مسئله دیگر این است که کتابخانه ها را نمی شود به طور جزئی به کار اضافه کرد، اما با این حال در این زمینه فتوشاپ نسبت به رقیبان جایگاه بهتری را دارد.

عکس ها و Vector ها را در آبجکت نگه دارید

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

یک سبک ایجاد کنید و با آن پیش بروید

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

سبک شما از پاسخ به این سوالات تشکیل شده است: چه مقدار فضای خالی بین قسمت ها باشد؟ اندازه دکمه ها و حاشیه آنها چه قدر باشد؟ رنگ های دکمه ها یا هر جز دیگر چقدر باشد؟ چه طور و برای چه چیزی هایی لایه جدید ایجاد شود؟ و غیره. علاوه بر آن این روش به سایر همکاران شما در مشارکت در پروژه کمک می کند. و اگر شما بتوانید این سبک را با استفاده از کتابخانه ها ترکیب کنید شما در بازی دست خوبی را دارید.

به دست آوردن و یا ایجاد یک سبک در کار زمان بر و نیاز به تمرین دارد. حال اهمیت آن را می دانید لازم است زمانی را برای توسعه سبک برای طراحی وب سایت خود بوجود آورد. به مرور زمان در خواهید یافت که این سبک همچون ریل راه آهن می تواند بار زیاد پروژه را برای شما هموار کرده و به پیش برد.

همکاری دوستانه

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

کلام آخر

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