آموزش طراحی تصاویر کوچک تاپ گالری مجید آنلاین

[the_king]

بارها در مورد نحوه طراحی تصاویر Thumbnail مربوط به Top Gallery مجید آنلاین سوال شده بود.
(نحوه ایجاد کادر و هاشور و انعکاس نور (Gloss) بالای اون و ...)
فرصت رو مغتنم دیدم که با این آموزش واسه این سوالات تکراری یک مراسم ختم بگیریم. حقیر تمامی
مراحلی که برای ساختن چنین تصاویری باید انجام داد (ایجاد کادر، هاشور، انعکاس نور و ...) را در
این آموزش ذکر کردم.

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

مرحله اول
یک پروژه جدید ایجاد کنید و سپس یک لایه جدید بسازید (Create a new layer)
ابزار Rounded Rectangle Tool (زیر مجموعه کلید U) را انتخاب کرده و نحوه ترسیم را روی
Fill Pixels قرار داده و Radius را روی 10 پیکسل تنظیم کنید.
حالا در لایه جدیدی که ساخته اید یک مستطیل 140 در 110 پیکسلی رسم کنید. رنگ آن مهم نیست.

 

[the_king]

مرحله دوم
حالا تنظیمات Blending Options لایه را مطابق پارامتر های زیر مشخص کنید :
تیک Drop Shadow را بزنید و Opacity را روی 100 درصد قرار دهید.
Distance را روی 0 پیکسل و Spread را روی 35 درصد و Size را روی 6 پیکسل تنظیم کنید.
تیک Color Overlay را بزنید و رنگ سفید ffffff را انتخاب کنید.
در انتها تغییرات را با زدن دکمه OK ذخیره نمایید.



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

روش اول با پایین نگاه داشتن کلید Ctrl و کلیک کردن روی تصویر کوچک لایه (Thumbnail) در
لیست لایه ها انجام می شود.

روش دوم با انتخاب کردن منوی Select و گزینه Load Selection درون آن و تنظیم کردن Channel
روی نام لایه انجام می شود.

روش سوم با انتخاب کل تصویر (فشردن ترکیب کلیدی Ctrl + A یا انتخاب کردن گزینه Select All در داخل
منوی Select) و سپس پایین نگاه داشتن کلید Ctrl و استفاده از کلید فلش های مکان نما در دو جهت مخالف
انجام می شود. مثلاً اول کلید فلش به سمت چپ و سپس کلید فلش به سمت راست را به همراه کلید Ctrl
فشار می دهیم.

اکنون بایستی با استفاده از یکی از این سه روش، کادر بصورت یک ناحیه انتخاب (Selection) درآمده باشد.
در منوی Select گزینه Modify و در درون آن گزینه Contract را انتخاب کنید. مقدار را روی 2 پیکسل
قرار دهید و اجرا نمایید.

 

[the_king]

مرحله چهارم
یک لایه جدید بسازید (Create a new layer) و ناحیه انتخاب (Selection) را با یک رنگ دلخواه
پر کنید (Fill Color). این ناحیه انتخاب شده را در چندین لایه مختلف بکار خواهید برد پس ابتدا یک کپی
از آن بگیرید (Duplicate layer). حالا دو لایه مشابه خواهید داشت.
لایه بالایی را با برداشتن تیک چشم کنار آن در لیست لایه ها پنهان کنید (Hide this layer).



مرحله پنجم
در این مرحله نیاز به یک تصویر داریم، من از تصویر انیمیشن Finding Nemo استفاده کردم.
فایل تصویر مورد نظرتان را در فتوشاپ باز کنید و کل تصویر را انتخاب نمایید (Select All یا Ctrl + A).
حالا تصویر را در درون حافظه Clipboard کپی کنید (Ctrl + C).
اکنون می توانید فایل تصویر را ببندید چون دیگر نیازی به آن نیست.
به پروژه مان برگردید و لایه پایینی را در لیست لایه ها فعال کنید و سپس تصویر را Paste کنید (Ctrl + V).
اکنون لایه تصویر بایستی در میان دو لایه مشابه قرار گرفته باشد. اگر موقعیت لایه چنین نیست، آنرا بکشید
و در بین دو لایه قرار دهید.
در حالتی که لایه تصویر در لیست لایه ها فعال است ترکیب کلیدی Ctrl + Alt + G را فشار دهید تا
لایه زیرین برای تصویر نقش یک Mask را بازی کند. بدین ترتیب از کل تصویر صرفا ناحیه داخل کادر
دیده می شود. اکنون آزادانه می توانید لایه تصویر را جابجا کرده و یا تغییر اندازه دهید، بدون آنکه از ناحیه
کادر بیرون بزند.

 

[the_king]

مرحله ششم
یک پروژه جدید باز کنید که صرفا یک لایه Background سفید دارد. تا می توانید روی یک موقعیت از آن
Zoom کنید و توسط ابزار Pencil Tool (زیر مجموعه کلید B) سه نقطه را بصورت مورب و با رنگ
مشکی مطابق تصویر زیر رسم نمایید.



مرحله هفتم
در همان وضعیتی که Zoom کرده اید با ابزار Rectangular Marquee Tool (زیر مجموعه کلید M)
یک کادر 3 در 3 پیکسلی پیرامون آن سه نقطه بکشید تا بصورت یک Selection درآید.



حالا در منوی Edit گزینه Define Pattern را انتخاب کنید و نامی برای این Pattern جدید بنویسید.
شما اکنون یک Pattern برای رسم هاشور ها ساخته اید. (تصویر زیر اارتباطی با مراحل آموزش ندارد و صرفا نمونه ای از هاشور است).



دیگر کاری با این پروژه جدید و سه نقطه رسم شده نداریم پس آنرا ببندید. اکنون به پروژه اصلی مان برمی گردیم.

 

[the_king]

مرحله هشتم
یادتون هست که یکی از لایه های مشابه رو در مرحله چهارم از دید پنهان کردیم؟ (بالاترین لایه) اکنون آنرا
دوباره آشکار کنید (Show this layer) و Fill Opacity لایه را روی 0 درصد قرار دهید.
حالا تنظیمات Blending Options آن لایه را مطابق پارامتر های زیر مشخص کنید :
تیک Inner Shadow را بزنید و مقدار Opacity آنرا روی 25 درصد و Distance را روی 0 پیکسل
و Choke را روی 100 درصد و Size را روی 1 پیکسل قرار دهید.
تیک Pattern Overlay را هم بزنید و Blend Mode آنرا روی Multiply و Opacity را روی
25 درصد و Pattern را هم روی نمونه ای که شخصا ساخته اید تنظیم کنید.
حالا با زدن دکمه OK تغییرات را ذخیره کنید.



مرحله نهم
لایه بالایی (لایه هاشور دار) را توسط یکی از روش های سه گانه که در مرحله سوم معرفی شدند بصورت
یک ناحیه انتخاب (Selection) درآورید. حالا یک لایه جدید در بالای آن بسازید (Create a new layer)
و با یک رنگ دلخواه پر کنید (Fill Color).
توسط ابزار Rectangular Marquee Tool (زیر مجموعه کلید M) قسمت زیادی از لایه را انتخاب کنید
بطوریکه صرفا 13 پیکسل پایینی لایه بیرون بماند.



حالا با فشردن کلید Del در صفحه کلید، ناحیه انتخاب شده را حذف کنید. سپس با ترکیب کلیدی Ctrl + D ناحیه
انتخاب شده را رها کنید.

 

[the_king]

مرحله دهم
Fill Opacity لایه حاصل را روی 0 درصد قرار دهید.
اکنون تنظیمات Blending Options لایه را مطابق پارامترهای زیر مشخص کنید :
تیک Color Overlay را بزنید و رنگ را روی مشکی 000000 و Opacity را روی 35 درصد
قرار دهید.
تغییرات را با زدن کلید OK ذخیره نمایید.



مرحله یازدهم
نوشته مورد نظرتان (در این مثال Finding Nemo) را با استفاده از ابزار Horizontal Type Tool
(زیر مجموعه کلید T) و با رنگ سفید بنویسید. من از فونت Bitmap ای با نام Silkscreen در سایز
7 پیکسل استفاده کردم.

 

[the_king]

مرحله دوازدهم
یک لایه جدید بسازید (Create a new layer) و توسط ابزار Custom Shape tool (زیر مجموعه
کلید U) یک پروانه با رنگ دلخواه تان ترسیم کنید. سپس توسط ترکیب کلیدی Ctrl + T آنرا برای دوران
آماده کنید و سپس 30 درجه در خلاف جهت عقربه های ساعت بگردانید و در گوشه پایین سمت راست
کادر قرار دهید.



مرحله سیزدهم
اکنون تنظیمات Blending Options لایه پروانه را مطابق پارامتر های زیر مشخص کنید :
تیک Drop Shadow را بزنید و Opacity آنرا روی 60 درصد و Distance را روی 0 پیکسل و
Spread را روی 50 درصد و Size را روی 2 پیکسل قرار دهید.
تیک Bevel and Emboss را هم بزنید و Size آنرا روی 1 پیکسل و Soften را روی 7 پیکسل
قرار دهید.
تیک Gradient Overlay را بزنید و مشخصات Gradient را اینگونه ویرایش کنید :
رنگ خاکستری c4c5ca در سمت چپ و رنگ سفید ffffff در سمت راست باشد.
در انتها تغییرات را با زدن کلید OK ذخیره نمایید.

 

[the_king]

مرحله چهاردهم
یک لایه جدید بسازید (Create a new layer) و توسط ابزار Elliptical Marquee tool
(زیر مجموعه کلید M) یک بیضی بکشید و با رتگ دلخواه تان پر کنید (Fill Color) ، بطوریکه مطابق
تصویر زیر نیمه بالایی کادر را بپوشاند. (اگر قصد جابجا کردن بیضی را دارید صرفا قبل از پر کردن
آن بصورت Selection جابجایش کنید)



مرحله پانزدهم
ابتدا کادر اصلی (پایین ترین لایه که روی لایه Background قرار دارد) را با یکی از روش های سه گانه
بصورت یک ناحیه انتخاب (Selection) درآورید و سپس با ترکیب کلیدی Ctrl + Shift + I ناحیه
انتخاب را معکوس (Invert) کنید. حال در لیست لایه ها، لایه ای که در مرحله قبل ساخته اید را فعال کنید و
با فشردن کلید Del در صفحه کلید، نواحی اضافی لایه را حذف نمایید.
سپس با ترکیب کلیدی Ctrl + D ناحیه انتخاب شده را رها کنید.

 

[the_king]

مرحله شانزدهم
Fill Opacity لایه حاصل را روی 0 درصد قرار دهید.
سپس رنگ سفید ffffff را به عنوان رنگ Foreground فتوشاپ قرار دهید که در این مرحله به آن
نیاز داریم. (در حالت پیشفرض، رنگ مشکی رنگ Foreground طراحی است که بایستی به سفید
تغییرش دهید).
اکنون تنظیمات Blending Options لایه را مطابق پارامتر های زیر مشخص کنید :
تیک Gradient Overlay را بزنید و در مجموعه طیف های آماده ای که وجود دارد، عنوان
Foreground to Transparent را انتخاب کنید (بصورت پیشفرض این طیف دومین گزینه در بالا،
سمت چپ است). اکنون شدت طیف از سمت پایین به بالا به مرور کم می شود که درست نیست،
پس تیک گزینة Reverse را هم بزنید.
در نهایت تغییرات را با فشار دکمه OK ثبت کنید.



تمام شد، اکنون برای تغییر تصویر، کافیست لایه تصویر را حذف کرده و تصویر دیگری را در جای آن
قرار دهید و با فشردن ترکیب کلیدی Ctrl + Alt + G لایه زیرین را برای آن Mask کنید.



نمونه ای از پروژه بصورت فایل psd زیپ شده ضمیمه این پست می باشد.

 

[the_king]

آموزش کامل در یک فایل pdf سیزده صفحه ای هم آماده شد که بصورت zip شده ضمیمه این پست کردم.

 

[GFX Master]

بسیار عالی بود علی جان.

واقعا ممنون بابت این آموزشای خوب و کاملت.

فایل pdf رو به تاپیک مخصوصش اضافه میکنم.

موفق باشی.

 

[koury]

سلام
دوستان شرمنده من خیلی مبتدیم اگه میشه یه کم در مورد این 3 سوال من واضح تر توضیح بدین:
1.اینکه چطور میتونم لایه بگیرم همونطور که تو تصویر شماره 1 و 2 گفته شده و همچنین چطور میتونم لایه رو فعال کنم!؟
2.اینکه آیا منظور از ایجاد پروژه ی جدید همون باز کردن New Page هست؟
3. اون قسمت که گفته "نحوه ترسیم را روی
Fill Pixels قرار داده و Radius را روی 10 پیکسل تنظیم کنید." اگه ممکنه بگین چطور این کار رو بکنم؟
ممنون

 

[the_king]

سلام
دوستان شرمنده من خیلی مبتدیم اگه میشه یه کم در مورد این 3 سوال من واضح تر توضیح بدین:
1.اینکه چطور میتونم لایه بگیرم همونطور که تو تصویر شماره 1 و 2 گفته شده و همچنین چطور میتونم لایه رو فعال کنم!؟
2.اینکه آیا منظور از ایجاد پروژه ی جدید همون باز کردن New Page هست؟
3. اون قسمت که گفته "نحوه ترسیم را روی
Fill Pixels قرار داده و Radius را روی 10 پیکسل تنظیم کنید." اگه ممکنه بگین چطور این کار رو بکنم؟
ممنون

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

1) تصویر زیر را که تصویر لیست لایه ها است ببینید.

آیکون مربوط به ایجاد کردن لایه (Create a new layer) را با فلش مشکی و فعال کردن یک لایه در لیست لایه ها
(کلیک کردن روی آن لایه) را با فلش قرمز مشخص کردم :

2) منظور از ایجاد پروژه جدید، استفاده از ترکیب کلیدی Ctrl + N یا انتخاب آیتم New در منوی File است.

3) مطابق تصویر زیر و موقعیت فلش ها ابزار را انتخاب می کنید و سپس نحوه ترسیم را تغییر داده و
Radius را مشخص می نمایید :

ممنون

 

[the_king]

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

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

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

موقع هاشور درست کردن من هر کاری می کنم نمیشه! و همون سه نقطه ی مورب بجای هاشور هست! مراحل ششم و هفتم رو میگم.

فرض کنیم که شما سه نقطه را با موفقیت رسم کرده اید. حتما باید دور آن سه نقطه یک کادر انتخاب (Selection)
3 در 3 پیکسلی بندازید. اگر انجام اینکار برایتان دشوار بود، شاید بهتر باشد که از ابتدا موقعی که یک پروژه جدید
باز می کنید (Ctrl + N)، اندازه تصویر را 3 در 3 پیکسل بگیرید تا دیگر نیازی به کادر انتخاب نباشد :

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

وقتی لایه ای رو فعال می کنم تغییری تو لایه ی اصلی ایجاد نمیشه! آیا همینطور هست یا باید لایه هم عوض شه؟

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

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

مرحله ی نهم هم اگه میشه یه توضیحی بدین ممنون میشم.

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

اگر اینکار را درست انجام داده باشید، در تصویر بزرگ پروژه لایه مذکور بصورت یک ناحیه انتخاب (Selection) می شود :

حالا یک لایه جدید بسازید :

حالا باید آنرا با یک رنگ پر کنید، در منوی Edit گزینه Fill را انتخاب نمایید. مطابق تنظیمات زیر OK کنید،
البته رنگ بکار رفته می تواند بجای Foreground Color هر رنگ دیگری باشد :
(اگر عجله دارید، بجای استفاده از منوی مربوطه، ترکیب کلیدی Alt + Del را امتحان کنید.)

برای قسمت های دیگر مرحله 9 توضیح بیشتری به ذهنم نمی رسه.

 

[akbar_syberia]

سلام

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

من تا اینجا درست انجام دادم ولی اون تصویرم میفته پشت لایه ها
Ctrl + Alt + G رو هم نتونستم درست حلش کنم

این لایه هام

اینم تصویرم که اینطوری شد

اگر میشه تصویری توضیح بدین مثل همیشه

در ضمن آموزشتون برای کسانی که از صفر شروع میکنن هم قابل فهمه
مرسی

 

[the_king]

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

برای جابجا کردن یک لایه فعال شده (مثلا در این تصویری که شما قرار دادید، Layer 3 فعال است)،
ترکیب کلیدی ] + Ctrl و [ + Ctrl بکار می روند که اولی لایه را به سمت بالا و دومی لایه را به سمت پایین
انتقال می دهد. در طراحی شما فشار دادن ترکیب کلیدی ] + Ctrl موجب جابجا شدن لایه تصویر به سمت بالا می شود.

پس از انتقال تصویر به روی لایه مشکی، ترکیب کلیدی Ctrl + Alt + G را بکار بگیرید :

 

[Sisili boy]

سلام
ببخشید ها شما خودتون ناظم سایت هستید این طوری یه آموزش رو با 10-12 تا پست می نویسی از بقیه چه انتظاری باید داشت.
من تو همین انجمن پیش پای شما 5 تا آموزش گزاشتم هر کدوم به چه گندگی ولی تو یک پست . اگر این کار مشکلی نداره من هم از این به بعد مثل شما کنم هم پست بیشتری دادم هم بیشتر تشکر می شه.
​

 

[akbar_syberia]

سلام علی جان دستت درد نکنه اونجا مشکلم حل شد
فقط الان عکسم اینطوری شد

اون زیرنوشته که صورتیه کمرنگ نشد تا زیرش دیده بشه
ممنون اگر پاسخ این رو هم ارسال کنی

 

[the_king]

سلام علی جان دستت درد نکنه اونجا مشکلم حل شد.
فقط الان عکسم اینطوری شد

اون زیرنوشته که صورتیه کمرنگ نشد تا زیرش دیده بشه
ممنون اگر پاسخ این رو هم ارسال کنی

در حقیقت من برای اینکه زیر تصویر شفاف به نظر برسه رنگ لایه Background رو از سفید به رنگ eeeff0 تغییر دادم
وگرنه تصویر حاصل من هم همانند تصویر شما بدون نقاط شفاف است.

رنگ Foreground را را در فتوشاپ روی این رنگ eeeff0 تنظیم کنید (R = 238، G = 239، B = 240).

سپس لایه Background را در لیست لایه ها فعال کنید.
ترکیب کلیدی Alt + Del را بزنید تا رنگ Foreground مورد نظر کل فضای لایه را پر کند.
حالا اگر تصویر را ذخیره کنید، با توجه به یکسان بودن رنگ زمینه فروم و رنگی که اطراف تصویر را پوشانده، به نظر می رسد
که تصویر شفاف است، در حالی که حقیقتا نیست.

 

[akbar_syberia]

مرسی علی جان

2 تا سوال دیگه
در مرحله هشتم نوشتید fill opacity رو برابر 0 درصد قرار بدید اینو پیدا نکردم

سوال بعد اینکه لینک چند تا از آموزش ها که خودتون نوشتید ( نه کسی دیگه ) رو بدین استفاده کنیم
من مقالات شما رو پرینت کردم بدم به دوستام و یادگاری نگه دارم ممنون