انواع قالب سایت
ساخت گرافیکهای وب با Kuler
استفاده از پالت رنگی مناسب در طراحیتان یک نکته کلیدی در کارتان است. گرافیک برداری پیچیده بطور صحیح برای صفحه نمایش آماده شده و با یک پلات رنگی که بدقت در نظر گرفته شده واقعا میتواند به کار شما کمک کند. با معرفی اخیر صفحه نمایشهای با چگالی بالا برای تبلتها و نوت بوکها بسیار مهم است که گرافیکهایی فراهم شوند که بتوانند به شکل همواری متناسب شوند اما هنوز سایزهای فایل مناسب را برای پهنای باند بخصوص برای دستگاه های موبایل ارائه میکنند. آیکونهای ذخیره شده در اندازه x2 bitmaps که برای صفحه نمایشهای با چگالی بالا بکار میروند همیشه بهترین گزینه نیستند. در عوض توجه به ایجاد گرافیکهایتان در فرمت برداری از آغاز برای مجومعه انعطاف پذیرتری از خواستهها به راحتی متناسب میشوند و به عنوان فایلهای SVG یا برنامههای PNG برای مرورگرهای قدیمیتر صادر میشود.
در طول مسیر ما از برنامه Adobe Kuler iPhone برای رنگ صاف و یکدست و illustrator استفاده خواهیم کرد تا گرافیکهای پیچیده بسازیم.
دو برنامهای که یک ترکیب فوق العاده میسازند و از موبایل شما به عنوان قسمتی از برنامهاتان استفاده میکنند میتوانندبه شما در ایجادا خلاقیت کمک میکنند.
- آنچه شما انجام میدهید هرگز در پالت سواچ illustrator استفاده نمیشود. با توجه به kuler، تولید تمهای رنگی(kuler.adobe.com) پالتهای رنگی پر زرق و برق تنها به فاصله چند کلیک هستند. شما میتوانید برای ساخت یک اکانت در kuler.adobe.com/join یا تنها وارد شدن با ID ادوبتان ثبت نام کنید.
- برنامه kuler iOS را که مجانی است دانلود کنید(netm.ag/kulerapp-249).وارد برنامه شده و شروع کنید به گرفتن رنگ الهام بخش از هرجایی که آیفون یا دوربین iPad تان را استفاده میکنید . این برنامه کوچک شگفت انگیز پالتهای رنگی زنده را از هرچیزی که شما دوربینتان را بر روی آن قرار میدهید فراهم میکند. نتایج میتواند غیر منتظره باشد.
- هر پالت رنگی را که بر روی آیفون یا iPadتان ذخیره میکنید آنها در پانل kuler در داخل illustrator ظاهر میشوند. میتوانید پالتهای رنگی را از دایرکتوری kuler بر روی swatchاتان sync کرده، جستجو و یا اضافه کنید. با استفاده از رابط وب میتوانید تمهای رنگی Most Used یا Most Popular را مرور کرده و برای استفاده بعدی تمهای مورد علاقه خودتان را بسازید. این یک روند جریان کاری انتخاب رنگ است که واقعا عمل میکند.
- بعدا به آنچه لازم است انجام دهید تا مطمئن شوید illustrator artwork تان pixel-sharp را بر روی وب نمایان میکند، نگاهی بیاندازید. Illustrator را راه اندازی کرده و یک سند جدید یسازید(File> New). به عنوان مثال ما یک سند با طول و عرض مساوی میسازیم. تنظیمات زیر را برای تبادل دو طرفهای New Document انتخاب کنید:
اگر artboard یک طول و عرض زوج داشته باشد کار کردن با illustrator ساده تر است.
مرکز دقیق artboard سپس در گوشهای از یک پیکسل به جای وسط آن عقب نشینی میکند. بسته به آنچه شما میسازید ممکن است برای شما کار نکند اما همیشه ارزش این را دارد که از ابتدا آن را مد نظر قرار دهید.
- هنوز در دیالوگ 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 ). اگر نیاز دارید آن را غیر فعال کنید.
- با سند ساخته شده مواردی برای بررسی وجود دارد تا شما را مطمئن سازد که مشکلی با pixel perfection نخواهید داشت. بر روی Artboard Tool در پالت ابزارها کلیک کرده و یا دکمه های shift+[o] را فشار دهید. در نوار گزینهها که در بالای صفحه نمایش قرار دارد آیکون Reference Point را خواهید دید. این آیکون شبیه یک شبکه متشکل از ۹ مربع کوچک است. مطمئن شوید که مربع سمت چپ بالا انتخاب شده است. این یعنی اگر شما تصمیم گرفتید اندازه یک artboard را بعدا تغییر دهید از سمت چپ گوشه بالایی به جای مرکز تغییر اندازه خواهند داد که ممکن است باعث شود پیکسلها موقعیت در نظر گرفته شدهاشان را تغییر دهند. (میتوانید با دوبار کلیک کردن بر روی Artboard Tool برای مطرح شدن Artboard Option به Reference Point دسترسی پیدا کنید. این در قسمت Position از مبادلات محاورهای ظاهر میشود). بررسی مجدد مقادیر X و Y (فیلدهای نزدیک به آیکون Reference Point در نور گزینهها) هیچ رقم اعشاری ندارد. به عنوان مثال مقدار ۰٫۵px میتواند باعث شود که artwork شبکه را گم کند. مجددا میتوانید طول و عرض artboardتان را در اینجا تنظیم کنید اما بیایید به همان اندازهای که با آن شروع کردیم اکتفا کنیم.
- منوی View را باز کنید. توجه داشته باشید وقتی که pixel preview علامت دار شد (View > Pixel Preview) گزینه، مجدد تغییرات منو را از snap به Grid و از snap به Pixel سقوط میکند. این تنظیم میتواند بسته به مشاهده toggle شود.
- در پنجرهی Transform شما یک چک باکس خواهید دید که Align to Pixel Grid علامت دار است. یک هدف با گزینه انتخاب شده Align to Pixel Grid برای تنظیم کردن شبکه پیکسل در هر جایی که تغییر یافته است، اشاره دارد. اگر شما یک هدف با تنظیم پیکسلی را حرکت داده یا انتقال دهید مجددا بر اساس موقعیت جدیدش نسبت به شبکه تنظیم خواهد شد. برای صرفه جویی در زمان اگر متوجه شدید که هدفهای زیادی دارید که بر اساس شبکه پیکسلی تنظیم نشدهاند بر رویSelect > Objects> Not Aligned to Pixel Grid کلیک کنید تا آن هدفها انتخاب شوند. سپس میتوانید آن موارد را تحت قالب یک گروه حرکت دهید تا آنها را به شبکه برگردانید.
- وقتی که اشکال را با Stroke میکشید illustrator به صورت پیش فرض مسیر را بر روی سطح sub-pixel تنظیم میکند تا به تنظیم پیکسلی را برای Stroke هایی که پهنای عددی اشان فرد است، ۵px,3px,1px دست پیدا کنند. شما البته میتوانید تنظیم Stroke را به بیرون، داخل یا مرکز در بخش Align Stroke پنجره Stroke تغییر دهید و شکل سعی خواهد که جبران کند. با این حال اگر شما تصمیم دارید بردارهای pixel-perfect را به SVG صادر کنید، آنقدر میدانید که تنظیم بر روی مرکز را حفظ کنید چون فرمت SVG بیرون یا داخل تنظیمات Stroke را پشتیبانی نمیکند.
ساخت گرافیکهای وب با Kuler