Webiran.co
کاربر تازه وارد
بلور شدن تصاویر، مخصوصا هنگامیکه می‌خواهیم آیکون‌هایی برای صفحات وب خود طراحی کنیم، یکی از مشکلات عمدة تمام طراحان وب است. فتوشاپ رفتارهای خاصی در هنگام جابجایی، چرخش و کپی کردن یک تصویر نشان می‌دهد که در این مقاله به بررسی این مشکلات و بلور شدن پیکسل‌ها در هر یک از این عملیات می‌پردازیم. این مقاله ترجمه ای از مقاله Pixel Perfection When Rotating, Pasting And Nudging In Photoshop که در مجله smashingmagazine منتشر شده است.
[h=1]حل مشکل بلور شدن آیکون‌ها در فتوشاپ[/h]هنگام طراحی صفحات وب یا نرم‌افزارها، اغلب طراحان با بلور شدن پیکسل‌ها مشکل دارند و می‌خواهند مطمئن باشند که رنگ، بافت و موقعیت پیکسل‌ها صحیح است. اگر دقت نکنید، بعضی از کارهای معمول مثل، حرکت دادن، چرخاندن، و Paste کردن، می‌تواند تمام تلاش‌های شما را به باد دهد و نتیجه، کاری بلور شده باشد. اما با کمی تغییر در روش کارتان، می‌توانید کار هنری قوی را از اول تا آخر پروژه اجرا کنید.
[h=1]مشکل بلور پیکسل ها در چرخش[/h]اگر مراقت نباشید، چرخش لایه‌ها در فتوشاپ می تواند به راحتی پیکسل‌ها را بلور کند.
هنگامی که لایه‌ها را با ابزار Free Transform (یا هر ابزار دیگری) می‌چرخانید، اگر چرخش 90 یا 270 درجه باشد، کیفیت به اندازه لایه مربوط می‌شود. اگر تعداد پیکسل‌های طول و عرض لایه، زوج باشد، همه چیز درست است. اگر طول و عرض فرد باشد، باز هم همه چیز درست است. اما اگر عرض فرد باشد و طول زوج، یا برعکس، آن موقع چیزی شبیه به مثال پایین را مشاهده خواهید کرد.
در اینجا، آبجکتی، 9 در 20 پیکسل داریم که ابعادی زوج-فرد دارد. نتیجة خروجی برای لایه‌های برداری یا عادی (Btimap) با یکدیگر متفاوت است، ولی هر دو مورد غیر قابل استفاده هستند، چرا که لایه اولیه، در محدودة دقیقی برای پیکسل‌ها قرار نمی‌گیرد.[h=1]راه حل اول[/h]از آنجاییکه ابعاد (نسبت به پیکسل) زوج در فرد یا فرد در زوج مشکل ایجاد می‌کنند، به راهی احتیاج داریم تا مطمئن باشیم که اندازه پیکسل‌های لایه زوج در زوج است یا فرد در فرد است. احتمالا راه‌های بسیار به ذهن شما می‌رسد که می‌توانید این کار را انجام دهید، مثلا، با اضافه کردن یک تصویر مربع به عنوان ماسک به لایه، یا با اضافه کردن محتوای بیشتر به لایه که اندازه لایه را تصحیح کند. و یا می‌توانید مربعی در لایه دیگر بکشید، و هر دو لایه را با همدیگر بچرخانید.
تا زمانیکه ابعاد لایه یا لایه‌ها فرد در فرد یا زوج در زوج باشد همه چیز درست است.
[h=1]یک راه ساده‌تر[/h]
نقطه‌‌ای مرکزی چرخش را به گوشه بالا، سمت چپ (یا هر گوشه دیگری) تغییر دهید، بطوریکه نقطه چرخش در محدوده پیکسلی لایه باشد، اینکار مشکل را به طور کامل حل می‌کند. برای این منظور، بعد از انتخاب ابزار Free Transform، در میله ابزار نقطه چرخش را یکی از گوشه‌ها انتخاب کنید. این یک راه حل ساده و زیرکانه است.
در این روش، لایه‌های برداری یا معمولی به خوبی تاثیر می‌گیرند، دقت کنید که این روش در مواقع‌ای که از ابزار Free Transform یا انتخاب منوی Transformدر منوی Edit استفاده می‌کنید کاراست، در زمانیکه که کل تصویر را از منوی image -> Image Rotation می‌چرخوانید همه چیز درست است و نیازی به این روش نیست.
برای راحتی شما، من یک اکشن در فتوشاپ ساخته‌ام که همه چیز را به درستی انجام می‌دهد.
[h=1]مشکل بلور پیکسل ها در PASTE کردن تصاویر برداری[/h]اگر تصویر برداری در Illustrator ساخته و در لایه shape فتوشاپ Paste کنید، احتمالا دیده‌اید که نتیجه دقیقا آن چیزی نیست که شما انتظار داشته‌اید، و بطور قابل توجهی پیکسل‌ها بلور شده اند. در اینجا روش حل این مشکل را داریم.
در ادامه، تصویری همانطور که در Illistrotor مشاهده می شود داریم که اندازه پیکسل‌ها در پس زمینه آن رسم شده است.
در ادامه، همین تصویر در فتوشاپ چندین بار PASTE شده است. همانطور که مشاهده می‌کنید، تنها عکس گوشه چپ-بالا مناسب است، در صورتیکه بقیه دارای پیکسل‌های اضافی در محور x ها یا y ها و یا هر دو دارند.
[h=1]چه چیزی اشتباه است؟[/h]فتوشاپ به دو صورت Paste می‌کند. اگر شما قسمتی را انتخاب کرده باشد، مرکز محتوای Clipboard (قسمتی از حافظه است که وقتی محتوایی را کپی می‌کند، فتوشاپ آن محتوا را به آنجا منتقل می‌کنند) را با مرکز قسمت انتخاب شده برابر قرار می‌دهد و بقیه پیکسل‌ها را از روی این نقطه تراز می‌کند. اگر قسمتی انتخاب نشده باشد، مرکز محتوا با مرکز پنجره‌ای که در آن لحظه مشاهده می‌کنید تراز می شود. سطح بزرگنمایی که بر روی کارتان انجام داده‌اید، نتیجه کپی را مشخص می‌کند.
[h=1]راه حل اول[/h]نمونه تست ما، 32 در 12 پیکسل است. با انتخاب یک لایه در اندازه 32 در 12 پیکس، فتوشاپ دقیقا همان چیزی را که شما می‌خواهید Paste خواهد کرد. این راه حل را می‌شود خیلی سریع انجام داد.
[h=1]یک راه ساده‌تر[/h]اندازه قسمت انتخاب شده، لازم نیست که دقیقا هم اندازه تصویر برداری باشد. در این روش، انتخاب یک قسمت 2 در 2 پیکسل کافی است، چرا که مرکز یک تصویر که تعداد پیکسل طول و عرضش زوج است، در این هنگام دقیقا در مرکز این قسمت انتخاب شده قرار می‌گیرد، که دقیقا همان چیزی است که می‌خواهیم. اگر تصویر برداری دارای طول و عرض فرد باشد، آنگاه یک انتخاب 1 در 1 پیکسل کافی خواهد بود.
اگر برایتان زحمت است که ابعداد تصویر برداری را دقیقا اندازه بگیرید، می‌توانید با انتخاب قسمت 2 در 2 پیکسل، تصویر را Paste کنید. اگر تصویر تنها در محور x، بلور شد، انگاه یک قسمت 1 در 2 را انتخاب کنید. اگر تصویر در محور y، بلور شد، یک قسمت 2 در 1 انتخاب کنید، و اگر تصویر در هر دو محور x و y بلور شد، یک قسمت 1در 1 انتخاب کنید، و تصویر را Paste کنید. شاید به نظر پیچیده بیاید، ولی در عمل خیلی سریع و راحت است، و تنها دو بار لازم است که تصویر را Paste کنید تا نتیجه مطلوب را مشاهده کنید.
[h=1]اشیاء هوشمند (SMART OBJECTS )[/h]کپی تصاویر به شکل smart object دارای این مشکلات که قبلا گفته شده نیست (حداقل در فتوشاپ CS5). با این حال من از لایه‌های Shape بیشتر استفاده می‌کنم، چرا که؛ کنترل و ویرایش پذیری بیشتری دارد.
[h=1]مشکل بلور شدن در حرکت دادن نقاط برداری با کی‌بورد[/h]فتوشاپ در حرکت دادن نقاط برداری، عکس‌العمل‌های خاصی نسبت به بزرگنمایی تصویر شما نشان می‌دهد. در بزرگنمایی 100%، حرکت با کلید‌های جهت کی‌بورد نقطه برداری را دقیقا 1 پیکسل حرکت می‌دهد. در بزرگنامیی 200% به اندازه نصف یک پیکسل حرکت می‌دهد، در بزرگنمایی 300% به اندازه یک سوم یک پیکسل حرکت می‌دهد.
این رفتار کاملا عمدی است، ولی در بیشتر مواقع نمی‌خواهیم که اینطور باشد و بیشتر می‌خواهیم که به اندازه یک پیکسل بدون در نظر گرفتن میزان بزرگنمایی حرکت انجام گیرد. در این مرحله این قسمت را توضیح می‌دهیم.
یک صفحه جدید باز کنید، و در منوی Window -> Arrange ->New Window یک پنجره جدید بسازید. شما می‌توانید اندازه این پنجره را تغییر دهید و در آخر کار حذفش کنید.
با اینکار پنجره دیگری از صفحه اصلی را دارید که می‌توانید بزرگنمایی آن را در 100% قرار دهید تا حرکت‌هایی را که می‌خواهید به اندازه یک پیکسل باشند در این پنجره انجام دهید و بقیه کار را در صفحه اصلی انجام دهید. با فشار Ctrl+` می‌توانید میان دو پنجره حرکت کنید.
توجه کنید، با نگه داشتن کلید Shift و کلید‌های جهت کی‌بورد برای حرکت دادن نقاط، فتوشاپ بدون در نظر گرفتن بزرگنمایی همیشه به اندازه 10 پیکسل نقاط را حرکت می‌دهد. همچنین، کشیدن نقاط با مووس، در اغلب مواقع – نه همه مواقع – دقیقا بر روی پیکسل‌ها قرار می‌گیرد.
با اینکه ایده‌آل نیست، این تکنیک‌ها کمک می‌کنند تا لایه‌های برداری را بتوانیم در فتوشاپ ویرایش کنید. و یا می‌توان گفت که این دلیل دیگری است که چرا اشکال پنچیده‌تر را باید ابتدا در Illistrator طراحی کنیم.
با استفاده از تکنیک‌های درست، می‌توانید پیکسل‌ها را دقیقا در جایی که می‌خواهید جای دهید.
من مقالات قدیمی سایتم را به اینجا منتقل می‌کنم برای مشاهده مقالات جدیدتر و کاملتر به webiran.co مراجعه کنید.
[h=1]حل مشکل بلور شدن آیکون‌ها در فتوشاپ[/h]هنگام طراحی صفحات وب یا نرم‌افزارها، اغلب طراحان با بلور شدن پیکسل‌ها مشکل دارند و می‌خواهند مطمئن باشند که رنگ، بافت و موقعیت پیکسل‌ها صحیح است. اگر دقت نکنید، بعضی از کارهای معمول مثل، حرکت دادن، چرخاندن، و Paste کردن، می‌تواند تمام تلاش‌های شما را به باد دهد و نتیجه، کاری بلور شده باشد. اما با کمی تغییر در روش کارتان، می‌توانید کار هنری قوی را از اول تا آخر پروژه اجرا کنید.
[h=1]مشکل بلور پیکسل ها در چرخش[/h]اگر مراقت نباشید، چرخش لایه‌ها در فتوشاپ می تواند به راحتی پیکسل‌ها را بلور کند.
هنگامی که لایه‌ها را با ابزار Free Transform (یا هر ابزار دیگری) می‌چرخانید، اگر چرخش 90 یا 270 درجه باشد، کیفیت به اندازه لایه مربوط می‌شود. اگر تعداد پیکسل‌های طول و عرض لایه، زوج باشد، همه چیز درست است. اگر طول و عرض فرد باشد، باز هم همه چیز درست است. اما اگر عرض فرد باشد و طول زوج، یا برعکس، آن موقع چیزی شبیه به مثال پایین را مشاهده خواهید کرد.
در اینجا، آبجکتی، 9 در 20 پیکسل داریم که ابعادی زوج-فرد دارد. نتیجة خروجی برای لایه‌های برداری یا عادی (Btimap) با یکدیگر متفاوت است، ولی هر دو مورد غیر قابل استفاده هستند، چرا که لایه اولیه، در محدودة دقیقی برای پیکسل‌ها قرار نمی‌گیرد.[h=1]راه حل اول[/h]از آنجاییکه ابعاد (نسبت به پیکسل) زوج در فرد یا فرد در زوج مشکل ایجاد می‌کنند، به راهی احتیاج داریم تا مطمئن باشیم که اندازه پیکسل‌های لایه زوج در زوج است یا فرد در فرد است. احتمالا راه‌های بسیار به ذهن شما می‌رسد که می‌توانید این کار را انجام دهید، مثلا، با اضافه کردن یک تصویر مربع به عنوان ماسک به لایه، یا با اضافه کردن محتوای بیشتر به لایه که اندازه لایه را تصحیح کند. و یا می‌توانید مربعی در لایه دیگر بکشید، و هر دو لایه را با همدیگر بچرخانید.
تا زمانیکه ابعاد لایه یا لایه‌ها فرد در فرد یا زوج در زوج باشد همه چیز درست است.
[h=1]یک راه ساده‌تر[/h]
نقطه‌‌ای مرکزی چرخش را به گوشه بالا، سمت چپ (یا هر گوشه دیگری) تغییر دهید، بطوریکه نقطه چرخش در محدوده پیکسلی لایه باشد، اینکار مشکل را به طور کامل حل می‌کند. برای این منظور، بعد از انتخاب ابزار Free Transform، در میله ابزار نقطه چرخش را یکی از گوشه‌ها انتخاب کنید. این یک راه حل ساده و زیرکانه است.
در این روش، لایه‌های برداری یا معمولی به خوبی تاثیر می‌گیرند، دقت کنید که این روش در مواقع‌ای که از ابزار Free Transform یا انتخاب منوی Transformدر منوی Edit استفاده می‌کنید کاراست، در زمانیکه که کل تصویر را از منوی image -> Image Rotation می‌چرخوانید همه چیز درست است و نیازی به این روش نیست.
برای راحتی شما، من یک اکشن در فتوشاپ ساخته‌ام که همه چیز را به درستی انجام می‌دهد.
[h=1]مشکل بلور پیکسل ها در PASTE کردن تصاویر برداری[/h]اگر تصویر برداری در Illustrator ساخته و در لایه shape فتوشاپ Paste کنید، احتمالا دیده‌اید که نتیجه دقیقا آن چیزی نیست که شما انتظار داشته‌اید، و بطور قابل توجهی پیکسل‌ها بلور شده اند. در اینجا روش حل این مشکل را داریم.
در ادامه، تصویری همانطور که در Illistrotor مشاهده می شود داریم که اندازه پیکسل‌ها در پس زمینه آن رسم شده است.
در ادامه، همین تصویر در فتوشاپ چندین بار PASTE شده است. همانطور که مشاهده می‌کنید، تنها عکس گوشه چپ-بالا مناسب است، در صورتیکه بقیه دارای پیکسل‌های اضافی در محور x ها یا y ها و یا هر دو دارند.
[h=1]چه چیزی اشتباه است؟[/h]فتوشاپ به دو صورت Paste می‌کند. اگر شما قسمتی را انتخاب کرده باشد، مرکز محتوای Clipboard (قسمتی از حافظه است که وقتی محتوایی را کپی می‌کند، فتوشاپ آن محتوا را به آنجا منتقل می‌کنند) را با مرکز قسمت انتخاب شده برابر قرار می‌دهد و بقیه پیکسل‌ها را از روی این نقطه تراز می‌کند. اگر قسمتی انتخاب نشده باشد، مرکز محتوا با مرکز پنجره‌ای که در آن لحظه مشاهده می‌کنید تراز می شود. سطح بزرگنمایی که بر روی کارتان انجام داده‌اید، نتیجه کپی را مشخص می‌کند.
[h=1]راه حل اول[/h]نمونه تست ما، 32 در 12 پیکسل است. با انتخاب یک لایه در اندازه 32 در 12 پیکس، فتوشاپ دقیقا همان چیزی را که شما می‌خواهید Paste خواهد کرد. این راه حل را می‌شود خیلی سریع انجام داد.
[h=1]یک راه ساده‌تر[/h]اندازه قسمت انتخاب شده، لازم نیست که دقیقا هم اندازه تصویر برداری باشد. در این روش، انتخاب یک قسمت 2 در 2 پیکسل کافی است، چرا که مرکز یک تصویر که تعداد پیکسل طول و عرضش زوج است، در این هنگام دقیقا در مرکز این قسمت انتخاب شده قرار می‌گیرد، که دقیقا همان چیزی است که می‌خواهیم. اگر تصویر برداری دارای طول و عرض فرد باشد، آنگاه یک انتخاب 1 در 1 پیکسل کافی خواهد بود.
اگر برایتان زحمت است که ابعداد تصویر برداری را دقیقا اندازه بگیرید، می‌توانید با انتخاب قسمت 2 در 2 پیکسل، تصویر را Paste کنید. اگر تصویر تنها در محور x، بلور شد، انگاه یک قسمت 1 در 2 را انتخاب کنید. اگر تصویر در محور y، بلور شد، یک قسمت 2 در 1 انتخاب کنید، و اگر تصویر در هر دو محور x و y بلور شد، یک قسمت 1در 1 انتخاب کنید، و تصویر را Paste کنید. شاید به نظر پیچیده بیاید، ولی در عمل خیلی سریع و راحت است، و تنها دو بار لازم است که تصویر را Paste کنید تا نتیجه مطلوب را مشاهده کنید.
[h=1]اشیاء هوشمند (SMART OBJECTS )[/h]کپی تصاویر به شکل smart object دارای این مشکلات که قبلا گفته شده نیست (حداقل در فتوشاپ CS5). با این حال من از لایه‌های Shape بیشتر استفاده می‌کنم، چرا که؛ کنترل و ویرایش پذیری بیشتری دارد.
[h=1]مشکل بلور شدن در حرکت دادن نقاط برداری با کی‌بورد[/h]فتوشاپ در حرکت دادن نقاط برداری، عکس‌العمل‌های خاصی نسبت به بزرگنمایی تصویر شما نشان می‌دهد. در بزرگنمایی 100%، حرکت با کلید‌های جهت کی‌بورد نقطه برداری را دقیقا 1 پیکسل حرکت می‌دهد. در بزرگنامیی 200% به اندازه نصف یک پیکسل حرکت می‌دهد، در بزرگنمایی 300% به اندازه یک سوم یک پیکسل حرکت می‌دهد.
این رفتار کاملا عمدی است، ولی در بیشتر مواقع نمی‌خواهیم که اینطور باشد و بیشتر می‌خواهیم که به اندازه یک پیکسل بدون در نظر گرفتن میزان بزرگنمایی حرکت انجام گیرد. در این مرحله این قسمت را توضیح می‌دهیم.
یک صفحه جدید باز کنید، و در منوی Window -> Arrange ->New Window یک پنجره جدید بسازید. شما می‌توانید اندازه این پنجره را تغییر دهید و در آخر کار حذفش کنید.
با اینکار پنجره دیگری از صفحه اصلی را دارید که می‌توانید بزرگنمایی آن را در 100% قرار دهید تا حرکت‌هایی را که می‌خواهید به اندازه یک پیکسل باشند در این پنجره انجام دهید و بقیه کار را در صفحه اصلی انجام دهید. با فشار Ctrl+` می‌توانید میان دو پنجره حرکت کنید.
توجه کنید، با نگه داشتن کلید Shift و کلید‌های جهت کی‌بورد برای حرکت دادن نقاط، فتوشاپ بدون در نظر گرفتن بزرگنمایی همیشه به اندازه 10 پیکسل نقاط را حرکت می‌دهد. همچنین، کشیدن نقاط با مووس، در اغلب مواقع – نه همه مواقع – دقیقا بر روی پیکسل‌ها قرار می‌گیرد.
با اینکه ایده‌آل نیست، این تکنیک‌ها کمک می‌کنند تا لایه‌های برداری را بتوانیم در فتوشاپ ویرایش کنید. و یا می‌توان گفت که این دلیل دیگری است که چرا اشکال پنچیده‌تر را باید ابتدا در Illistrator طراحی کنیم.
با استفاده از تکنیک‌های درست، می‌توانید پیکسل‌ها را دقیقا در جایی که می‌خواهید جای دهید.
من مقالات قدیمی سایتم را به اینجا منتقل می‌کنم برای مشاهده مقالات جدیدتر و کاملتر به webiran.co مراجعه کنید.
