ایجاد یک صفحه ی طراحی وب سایت در فتوشاپ(قسمت دوم)

فتوشاپ

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

http://www.7learn.com/a/msm/webdesign/photoshop/0.png

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

۱-  برای شروع کار یک فایل جدید در ابعاد ۹۶۰ پیکسل (عرض)  و ۹۰۰ پیکسل (ارتفاع) و ۷۲dpi رزولوشن ایجاد کنید.

۲-  با سطل رنگ (Paint Bucket) رنگ (#۰۴۲۸۳b) را بر روی صفحه بریزید.

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

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

۵-  حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#۴۱۷۳۸e) را برای کشیدن این اشکال انتخاب کردم.

۶-  در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#۲۸۶۰۷d) پر کردم.

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

۸-  شما هم این کار را برای ۴ گوشه کار به همین صورت تکرار کنید. حالا ما ۲ نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

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

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/9.jpg

۱۲-  و (Opacity) لایه را به ۴۰% کاهش دهید.

۱۳-  مراحل ۱۰ تا ۱۲ را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

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

http://www.7learn.com/a/msm/webdesign/photoshop/12.jpg

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/13.jpg

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

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

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

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

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

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

۲۳-  حال اگر میزان شفافیت (Opacity) لایه را به ۶% کاهش دهید نتیجه کار شماره ۴ عکس زیر می شود.

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

http://www.7learn.com/a/msm/webdesign/photoshop/16.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/17.jpg
۲۶-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/18.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/19.jpg

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/20.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/twitter.jpg

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

این مطلب را به اشتراک گذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشهد، میدان دلاوران
09159280092