ساخت گرافیکهای وب با Kuler

استفاده از پالت رنگی مناسب در طراحیتان یک نکته کلیدی در کارتان است. گرافیک برداری پیچیده بطور صحیح برای صفحه نمایش آماده شده و با یک پلات رنگی که بدقت در نظر گرفته شده واقعا می­تواند به کار شما کمک کند. با معرفی اخیر صفحه نمایشهای با چگالی بالا برای تبلتها و نوت بوکها بسیار مهم است که گرافیکهایی فراهم شوند که بتوانند به شکل همواری متناسب شوند اما هنوز سایزهای فایل مناسب را برای پهنای باند بخصوص برای دستگاه های موبایل ارائه می­کنند. آیکونهای ذخیره شده در اندازه x2 bitmaps که برای صفحه نمایشهای با چگالی بالا بکار می­روند همیشه بهترین گزینه نیستند. در عوض توجه به ایجاد گرافیکهایتان در فرمت برداری از آغاز برای مجومعه انعطاف پذیرتری از خواسته­ها به راحتی متناسب می­شوند و به عنوان فایلهای SVG یا برنامه­های PNG برای مرورگرهای قدیمی­تر صادر می­شود.

  در طول مسیر ما از برنامه Adobe Kuler iPhone برای رنگ صاف و یکدست و illustrator  استفاده خواهیم کرد تا گرافیک­های پیچیده بسازیم.

دو برنامه­ای که یک ترکیب فوق العاده می­سازند و از موبایل شما به عنوان قسمتی از برنامه­اتان استفاده می­کنند می­توانندبه شما در ایجادا خلاقیت کمک می­کنند.

1. آنچه شما انجام می­دهید هرگز در پالت سواچ illustrator استفاده نمی­شود. با توجه به kuler، تولید تم­های رنگی(kuler.adobe.com) پالتهای رنگی پر زرق و برق تنها به فاصله چند کلیک هستند. شما می­توانید برای ساخت یک اکانت در kuler.adobe.com/join یا تنها وارد شدن با ID ادوبتان ثبت نام کنید.
2. برنامه kuler iOS را که مجانی است دانلود کنید(netm.ag/kulerapp-249).وارد برنامه شده و شروع کنید به گرفتن رنگ الهام بخش از هرجایی که آیفون یا دوربین iPad تان را استفاده می­کنید . این برنامه کوچک شگفت انگیز پالتهای رنگی زنده را از هرچیزی که شما دوربینتان را بر روی آن قرار می­دهید فراهم می­کند. نتایج می­تواند غیر منتظره باشد.
3. هر پالت رنگی را که بر روی آیفون یا iPadتان ذخیره ­می­کنید آنها در پانل kuler در داخل illustrator ظاهر می­شوند. می­توانید پالتهای رنگی را از دایرکتوری kuler بر روی swatchاتان sync کرده، جستجو و یا اضافه کنید. با استفاده از رابط وب می­توانید تم­های رنگی  Most Used یا Most Popular را مرور کرده و برای استفاده بعدی تم­های مورد علاقه خودتان را بسازید. این یک روند جریان کاری انتخاب رنگ است که واقعا عمل می­کند.
4. بعدا به آنچه لازم است انجام دهید تا مطمئن شوید illustrator artwork تان pixel-sharp را بر روی وب نمایان می­کند، نگاهی بیاندازید. Illustrator را راه اندازی کرده و یک سند جدید یسازید(File> New). به عنوان مثال ما یک سند با طول و عرض مساوی می­سازیم. تنظیمات زیر را برای تبادل دو طرفه­ای New Document انتخاب کنید:

       اگر artboard یک طول و عرض زوج داشته باشد کار کردن با illustrator  ساده ­تر است.

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

1. هنوز در دیالوگ New Document گزینه­های Advanced  با کلیک کردن فلش کوچک نمایان می­شود. از اینکه Color Mode بر روی RGB و Raster Effects بر روی screen‪(۷۲ppi)‬ تنظیم شده اطمینان حاصل کنید. Preview Mode بر روی Pixel تغییر دهید تا وقتی که بر روی artwork  زوم می­کنید بتوانید واقعا پیکسلها را به جای شکلهای برداری هموار ببینید. (برای مشاهده شبکه پیکسل در فرمان Pixel Preview زوم را بر روی ۶۰۰ درصد یا بالاتر تنظیم کنید:View > Pixel Preview ). می­توانید چک باکس Align New Objects to Pixel Grid را بررسی کنید . این می­تواند گاهی اوقات سبب مشکلات نمایش با موارد جدید شود بنابراین این گزینه نیز در پنجره Transform موجود است(Window > Transform ). اگر نیاز دارید آن را غیر فعال کنید.
2. با سند ساخته شده مواردی برای بررسی وجود دارد تا شما را مطمئن سازد که مشکلی با pixel perfection نخواهید داشت. بر روی Artboard Tool در پالت ابزارها کلیک کرده و یا دکمه های shift+‪[o]‬ را فشار دهید. در نوار گزینه­ها که در بالای صفحه نمایش قرار دارد آیکون Reference Point را خواهید دید. این آیکون شبیه یک شبکه متشکل از ۹ مربع کوچک است. مطمئن شوید که مربع سمت چپ بالا انتخاب شده است. این یعنی اگر شما تصمیم گرفتید اندازه یک artboard را بعدا تغییر دهید از سمت چپ گوشه بالایی به جای مرکز تغییر اندازه خواهند داد که ممکن است باعث شود پیکسلها موقعیت در نظر گرفته شده­اشان را تغییر دهند. (می­توانید با دوبار کلیک کردن بر روی Artboard Tool برای مطرح شدن Artboard Option به Reference Point دسترسی پیدا کنید. این در قسمت Position از  مبادلات محاوره­ای ظاهر می­شود). بررسی مجدد مقادیر X و Y (فیلدهای نزدیک به آیکون Reference Point در نور گزینه­ها) هیچ رقم اعشاری ندارد. به عنوان مثال مقدار ۰٫۵px می­تواند باعث شود که artwork شبکه  را گم کند. مجددا می­توانید طول و عرض artboardتان را در اینجا تنظیم کنید اما بیایید به همان اندازه­ای که با آن شروع کردیم اکتفا کنیم.
3. منوی View را باز کنید. توجه داشته باشید وقتی که pixel preview علامت دار شد (View > Pixel Preview) گزینه، مجدد تغییرات منو را از snap به Grid و از snap به Pixel سقوط می­کند. این تنظیم می­تواند بسته به مشاهده toggle شود.
4. در پنجره­ی Transform شما یک چک باکس خواهید دید که Align to Pixel Grid علامت دار است. یک هدف با گزینه انتخاب شده Align to Pixel Grid برای تنظیم کردن شبکه پیکسل در هر جایی که تغییر یافته است، اشاره دارد.  اگر شما یک هدف با تنظیم پیکسلی را حرکت داده یا انتقال دهید مجددا بر اساس موقعیت جدیدش نسبت به شبکه تنظیم خواهد شد. برای صرفه جویی در زمان اگر متوجه شدید که هدفهای زیادی دارید که بر اساس شبکه پیکسلی تنظیم نشده­اند بر رویSelect > Objects> Not Aligned to Pixel Grid کلیک کنید تا آن هدفها انتخاب شوند. سپس می­توانید آن موارد را تحت قالب یک گروه حرکت دهید تا آنها را به شبکه برگردانید.
5. وقتی که اشکال را با Stroke می­کشید illustrator به صورت پیش فرض مسیر را بر روی سطح sub-pixel تنظیم می­کند تا به تنظیم پیکسلی را برای Stroke هایی که پهنای عددی اشان فرد است، ۵px,3px,1px دست پیدا کنند. شما البته می­توانید تنظیم Stroke را به بیرون، داخل یا مرکز در بخش Align Stroke پنجره Stroke تغییر دهید و شکل سعی خواهد که جبران کند. با این حال اگر شما تصمیم دارید بردارهای pixel-perfect را به SVG صادر کنید، آنقدر می­دانید که تنظیم بر روی مرکز را حفظ کنید چون فرمت SVG بیرون یا داخل تنظیمات Stroke را پشتیبانی نمی­کند.

ساخت گرافیکهای وب با Kuler