۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

۱۰- Undo، و باز هم Undo

طراحی است و Undo کردنِ مدام. خوب حتماً ترکیب Ctrl + Z را می شناسید. این ترکیب طرح را به یک مرحله قبل بر می گرداند؛ اما اگر دوباره ار آنها استفاده کنید عمل قبلی را این بار redo می کند. اما معمولاً نیاز است که چند مرحله عقب برویم تا به حالت مورد نظر برسیم.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

البته خود فوتوشاپ این قضیه را از پیش دیده و ترکیب Alt + Ctrl + Z را برای این منظور در نظر گرفته است. با ترکیب این کلیدها می توانید با توجه به تنظیماتی که در قسمت Edit > Preference > Performance انجام داده اید به حالت های قبلی بر گردید.

اما اگر فشردن سه کلید راه دست تان نیست و می خواهید همان Ctrl + Z این کار را انجام دهد کافی است Ctrl + Shft + Alt + K را بزنید تا به پنل میانبرهای صفحه کلید دست پیدا کنید و آنجا کلیدهای میانبر Undo را از قسمت Edit به حالت دلخواه عوض کنید.
۹- نمونه برداری از رنگ، هرجا
طرح وبگاهی چشم تان را گرفته و نمی دانید دقیقاً از چه رنگ هایی در آن استفاده شده؟ این اتفاقی است که برای اغلب طراحان می افتد. شاید راه اولیه این باشد: اجرای Color Picker و انتخاب آن رنگ و گرفتن کد هگز آن، سپس کلیک کردن روی پالِت رنگ در فوتوشاپ و وارد کردن کد هگز و سرانجام حصول رنگ مورد نظر؛ اما فکر نمی کنید این روش کمی سر درد آور است؟

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

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

۸- guide منعطف
نکته هشتم درواقع ترکیب ۲ نکته است و امیدواریم که به این زودی خسته نشده باشید چون تازه اوایل کاریم. یک طراح وب مجبور است مدام برای قرار دادن المان های مختلف در موقعیت مناسب و یا به عبارت دیگر در پیکسل صحیح از guide استفاده کند.
شما چطور یک guide می سازید؟ با کلیک روی View، بعد New Guide و سپس درباره guide افقی یا عمودی تصمیم می گیرید، موقعیت آن را وارد می کنید و Enter را می زنید؟ راه ساده تر این است که با ترکیب  Ctrl +R ابزار Rouler را فعال کنید، روی آن کلیک کنید و به پایین بکشید تا guide افقی را بسازید، یا بر عکس.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

و یک نکته دیگر: وقتی در حال کشیدن guide با ابزار Move هستید که می توان آن را فشردن کلید V فعال کرد، کلید Alt را فشار دهید و نگه دارید تا guide از حالت افقی به عمودی تغییر کند و بالعکس. حال می توانید خودتان را استاد استفاده از guide بدانید.

۷- شبیه سازی استایل لایه
استفاده از Layer styleها برای ساختن آیکون رسانه اجتماعی خیلی لذت بخش است ولی زمانی خسته کننده می شود که بخواهید همان Layer Styleها را به همه آیکون های شبکه اجتماعی اضافه کنید که هر یک معمولاً در چند جزء هم هستند.
تا حالا متوجه آیکون fx در کنار Layer شده اید؟ خوب هر چیزی را برای کار ساخته اند، اگر Alt را فشار دهید و آیکون fx را به لایه دیگری ببرید، استایل لایه اول را در لایه جدید کپی خواهد کرد؛ این طور راحت تر نیست؟

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

اگر می خواهید بدانید در کل وظیفه آیکون fx چیست، خوب، این آیکون امکان می دهد استایل لایه ای را به لایه دیگر ببرید و برای این منظور کافی است این آیکون را بدون فشردن کلید Alt به لایه مورد نظر بکشانید.

۶- در مرکز قرار دادن المان
برای حصول طراحی خوب یک پیکسل، اغلب لازم است المانی دقیقاً در جایی قرار داده شود. به نظر کار ساده ای است فقط باید چند guid ساخت و المان ها را به آنها چسباند، اما اگر خواسته باشید یک المان را دقیقاً در وسط فضایی قرار دهید حتماً به چندین guid، اندازه و تمرکز نیاز خواهد بود.
درواقع راهی وجود دارد که کل این روند را آسان تر می کند. روی لایه المانی که می خواهید دقیقاً در مرکز قرار گیرد کلیک کنید، سپس Ctrl + A را فشار دهید تا کل سند (Document) انتخاب شود. سپس ابزار Move را فعال کنید تا یک سری آیکون ظاهر شود. روی آیکون دوم کلیک کنید تا المان را از بالا به پایین در مرکز قرار دهید و بعد با کلیک روی آیکون پنجم، المان را در افق هم در مرکز قرار دهید و تمام؛ به همین سادگی انجام شد.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

نمی توان المانی را همزمان که دقیقاً در مرکز کل فضای سند قرار دارد در مرکز ناحیه مشخصی هم قرار داد. اگر بخواهیم  یک المان را دقیقاً در مرکز قسمت پایینی قرار دهیم، تنها باید با استفاده از ابزار Selection که با فشردن کلید M فعال می شود، ناحیه مورد نظر را انتخاب نمود. سپس المان مورد نظر را دقیقاً در مرکز آن گذاشت.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

باقی حالات تراز بندی را می توانید در بین آیکون های ظاهر شده مورد بررسی قرار دهید تا به خوبی به انواع آن مسلط شوید.

۵- مشاهده Selection، در یک زمان
در طراحی layout اغلب نیاز است بررسی شود که یک المان به تنهایی یا در کنار تعداد محدودی المان دیگر چطور به نظر می رسد؛ مثلاً در layout وبگاه زیر، فرض کنید بخواهیم دکمه های اسلایدر (slider’s buttons) را بررسی کنیم تا مطمئن شویم که شفافیت ندارند و با یا بدون تصویر اسلایدر به همان شکل دیده می شوند.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

یک روش این است که نمایش لایه تصویر اسلایدر، لایه پس زمینه اسلایدر و حتی لایه پس زمینه محتوی را خاموش کنید. اما بد نیست این روش را هم امتحانی کنید: کلید Alt را پایین نگه دارید، سپس روی آیکون «چشم» کنار button group کلیک کنید تا نمایش تمام لایه ها غیر فعال شود. حالا فقط دکمه های مورد نظرتان دیده می شود. بعد اینکه کارتان با آن تمام شد کافی است دوباره همان آیکون را کلیک کنید تا باز همه لایه ها را ببینید.

این ترفند موقع برش تصویر خیلی به کار می آید. وقتی می خواهید دکمه اسلایدر را بدون المان های دیگری مانند تصویر اسلایدر ببرید، می توانید با استفاده از این ترفند نمایش همه لایه ها را خاموش کنید تا فقط دکمه مورد نظر را برش دهید، بعد دوباره آیکون «چشم» را بزنید تا لایه ها برگردند. این طوری کلی در وقت صرفه جویی می شود.
۴- تنظیم ترکینگ فونت، هر زمان

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

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

بگذارید فرض کنیم هدف این است که ترکینگ نوشته «۳۶۰» کم شود که لوگوی تولیدی منحصر به فردی به دست آید و در یاد بینندگان آن بماند. مثلاً با انتخاب «POLO360» با استفاده از ابزار Type که با فشردن کلید T فعال می شود می توان با پایین نگه داشتن Alt و فشردن دکمه  -> شروع به کاهش ترکینگ نوشته کرد.

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

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

ولی نگران نباشید نردبان اینجا است تا طراحان در زندگی بیاسایند. کلید V را بزنید تا ابزار Move فعال شود. حال Ctrl را پایین نگه دارید و سپس روی المان مورد نظر کلیک کنید، لایه المان شما خودکاروار انتخاب شد. به همین سادگی، اما به یاد داشته باشید که اگر المان ها را در یک گروه قرار دهید و از این ترفند استفاده کنید پوشه (Folder) گروهی که شامل المان کلیک شده است انتخاب می شود (مانند بالا).

۲- شیء هوشمند برای طراح هوشمند
همان طور که از اسمش بر می آید، شیء هوشمند (Smart Object) کار را با انجام دادن ۲ عمل اولیه کار ویرایش شما را هوشمند تر می کند: اجرای تبدیل های نامخرب و اجرای فیلتر. این خصوصیت به ویژه وقتی به درد می خورد که شما در حال تولید layout وبگاهی هستید که در آن گرافیک های سنگین مانند آیکون های رسانه اجتماعی و کیت های UI به کار رفته است، و فقط نیاز دارید روی لایه ای راست کلیک کنید و با انتخاب گزینه «Convert to Smart Object» از مزایایش استفاده کنید.
نخستین عملکرد بیان می کند که وقتی لایه ای به شیء هوشمند تبدیل می شود، می توان به هر حالتی که مایلید و بدون از دست رفتن کیفیت اصلی تغییر شکل دهید. در اینجا می خواهیم اسلایدر تصویر (image slider) بسازیم، پس لایه های اسلایدر تصویر را به شیء هوشمند تبدیل می کنیم و اندازه اش را کوچک تر نماییم.

 ۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

به نظر می رسد زیادی کوچک شد، بهتر است به حالت اول بر گردانده شود.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

خوب حالا ظاهراً همه چیز مرتب شد. در تصویر زیر نتیجه اعمال backward transformation بدون تبدیل لایه به شیء هوشمند را مشاهده می کنید.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

الان تفاوت به خوبی مشهود است، به خصوص در قسمت دکمه های اسلایدر. backward transformation بدون اعمال شیء هوشمند روی لایه ها باعث از دست رفتن کیفیت اسلایدر (slider) و دکمه های اسلایدر می شود. پس با تبدیل یک لایه به شیء هوشمند، می توانید آن را هر قدر که بخواهید کوچک کنید و وقتی پشیمان شدید و تصمیم به برگرداندن لایه به حالت اول گرفتید این کار را بدون افت کیفیت انجام دهید.

یک مزیت دیگر تبدیل لایه به شیء هوشمند این است که وقتی فیلتری را روی یک شیء هوشمند اعمال می کنید یک لایه فیلتر، زیر لایه شیء هوشمند ظاهر می شود. می توانید فیلتر اعمال شده را به راحتی با خاموش کردن نمایش لایه فیلتر غیر فعال کنید. به این نوع فیلتر کردن، فیلتر نامخرب اطلاق می شود.
۱- یک Snapshot از گذشته زیبا
تا اینجا آموختید چگونه چند بار undo کنید، استایل های لایه را کپی کنید، سریعتر لایه ای را انتخاب کنید و از اسمارت ابجکت ها استفاده کنید. اینها مهارت هایی هستند که سرعت کار شما را بالا می برند؛ اما اگر بعد از ۲ ساعت کار از ماحصل آن راضی نبودید و خواستید به وسط های کار برگردید چه می کنید؟ حتی اگر Redo را با نکته هایی که قبلتر گفتیم به کار بگیرید باز کار سختی خواهد بود. اینجا است که پای Snapshot به میان می آید.

۱۰ نکته کوچک و مهم در فتوشاپ برای طراحان وب

snapshot به شما اجازه می دهد از هر حالت کار، موقتاً رونوشت بگیرید تا در وقت حاجت به سادگی با کلیک روی آن به حالت دلخواه بازگردید. برای این کار، باید پالت history را باز کنید و روی دومین آیکونی که پایین پالت می بینید کلیک کنید.

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

سلام من هم مدرس محتوای الکترونیکی هستم و با MMB کار میکنم . نکات شما بسیار خوب و مفید بود. از اینکه به وب شما آمدم خوشحالم.[گل]

فرزین

ممنون از وبلاگت.میخوام باهات درتماس باشم خواهشا جواب بده

ندا

خودم چهطوری میتونم وب طراحی کنم؟ممنون از وبلاگتون[لبخند]