طراحی قالب در فتوشاپ

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

 

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

1-  برای شروع کار یک فایل جدید در ابعاد 960 پیکسل (عرض)  و 900 پیکسل (ارتفاع) و 72dpi رزولوشن ایجاد کنید.

2-  با سطل رنگ (Paint Bucket) رنگ (#04283b) را بر روی صفحه بریزید.

3-  یک لایه جدید ایجاد کنید، قلم مو (Brush) را انتخاب کنید، سایز قلم را به اندازه ای زیاد کنید که بتوانید یک محیط روشن بزرگ با رنگ سفید (مانند نمای زیر) در وسط صفحه ایجاد کنید.

4-  ترکیب لایه را به حالت (Soft Light) تغییر دهید.

5-  حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#41738e) را برای کشیدن این اشکال انتخاب کردم.

6-  در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#28607d) پر کردم.

7-  سپس با رفتن به منوی Edit>Transform>Skew و انتخاب ابزار (Move Tool)، شکل خود را به حالت زیر تغییر دادم و گوشه‌ها را با دقت بالا به هم متصل کردم.

8-  شما هم این کار را برای 4 گوشه کار به همین صورت تکرار کنید. حالا ما 2 نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

9-  حالا باید یک کپی از این اشکال بگیریم و دقیقا به حالتی که در نمای زیر مشاهده میکنید با کمی فاصله در زیر اشکال اولیه و با رنگ تیره‌تر قرار دهیم، با این کار به صفحه خود عمق داده ایم. همین کار را برای نوار زیر صفحه تکرار کنید.

10-  یک شکل به حالت بیضی با استفاده از (Ellipse Tool) در زیر نوار روشن بالای صفحه و با رنگ تیره ایجاد کنید.

11-  به منوی (Filter) بروید و از زیرمنوی (Blur) گزینه (Gaussian Blur) را انتخاب کنید و تنظیمات آن را به روشی که در نمای زیر می‌بینید تغییر دهید.

12-  و (Opacity) لایه را به 40% کاهش دهید.

13-  مراحل 10 تا 12 را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

14-  حالا یک لایه بالاتر از همه لایه‌ها ایجاد کنید (می توانید اینکار را با استفاده از CTRL+SHIFT+ALT+N) انجام دهید و با استفاده از مداد یا (Pencil Tool) یک خط صاف افقی بکشید، ولی اندازه قلم را روی 1px تنظیم کنید.

15-  دقت کنید که خط سفید را مانند نمای زیر رسم کنید. هنگام کشیدن مداد (Pencil Tool) بر روی صفحه دکمه (Shift) را نگه دارید تا یک خط افقی صاف رسم شود. در نهایت خط رسم شده را مانند نمای زیر دقیقا بر روی لبه نوار بالا قرار دهید.

16-  حالا پاک کن (Eraser Tool) را مانند نمای زیر انتخاب کنید، دقت کنید که یک براش را در نرم‌ترین حالت قرار دهید.

17-  حالا با استفاده از همین پاک کن قسمتهایی از خط را مانند نمای زیر پاک کنید.

18-  در این مرحله با توجه به نیازها و سلیقه خود کمی متن به صفحه اضافه کنید.

19-  حالا شکلی همانند شماره یک عکس زیر در چپ کار خود ایجاد کنید.

20-  سپس به منوی Filter بروید و از زیرمنوی Blur گزینه Gaussian Blur را انتخاب کنید (Filter > Blur > Gaussian blur) و تنظیمات را مانند قبل بر لایه خود اعمال کنید. خروجی مانند شماره دو خواهد شد.

21-  با استفاده از ابزار انتخاب مستطیلی (Rectangular Marquee Tool) درست نیمه چپ شکل مورد نظر را انتخاب میکنیم.

22-  مطمئن باشید که لایه را درست انتخاب کرده اید، سپس دکمه‌های (CTRL+I) و بعد (CTRL+D) را بفشارید. با اینکار رنگ قسمت انتخاب شده را معکوس خواهید کرد و مانند شماره سه خواهد شد کارتون.

23-  حال اگر میزان شفافیت (Opacity) لایه را به 6% کاهش دهید نتیجه کار شماره 4 عکس زیر می‌شود.

24-  حالا با استفاده از (Rounded Rectangle Tool) یک شکل ساده به این حالت می‌کشیم.

25-  حالا با استفاده از دکمه‌های (CTRL+T) کمی شکل را به مانند نمای زیر می‌چرخانیم.

26-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

27-  باز هم با استفاده از (Rectangular Marquee Tool) قسمت سمت راست شکل فعلی را مانند نمای زیر انتخاب کنید.

28-  حالا دکمه Delete را بزنید و یا از منوی Edit  گزینه Clear را انتخاب کنید، سپس برای خروج از حالت انتخاب دکمه‌های CTRL+D  را فشار دهید.

29-  مانند مراحل اولیه کار، از این لایه یک کپی بگیرید و رنگ آن را تیره‌تر کنید و آن را درست در زیر لایه فعلی، البته با کمی تغییر زاویه قرار دهید.

30-  حالا کمی سلیقه به خرج داده و آیکون مورد نظر خود را پیدا کنید و آن را مانند نمای زیر در قسمتی از قالب جاسازی کنید.

31-  خسته نباشید، قالب شما آماده است