عیدی شب یلدا | آموزش ساخت یک صفحه شخصی (سایت) تجاری

سلام;
امیدوارم حال شما خوب باشه.
قبل از هر چیز پیشاپیش عید یلدای تمامی دوستان رو تبریک عرض میکنم و این آموزش هم یک عیدی ناقابل از من نوعی به شما دوست عزیز. امیدوارم لذت ببرید.

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

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

1. در این قسمت از آموزش به شما آموزش میدم که چگونه فن طراحی را بیاموزید. در قسمت اول در محیط فتوشاپ سندی با سایز 700 در 760 بسازید.(این نکته را فراموش نکنید که از سایزهای استاندارد مرورگرها بهره ببرید.) رنگ پس زمینه را با کد رنگ #343434 هماهنگ کنید.
ابزار Rectangle Tool را انتخاب کنید و با آن یک مربع مستطیل ساده ایجاد کنید. یادتان باشد با شعاع 5 پیکسل این کار را انجام دهید. درست مطابق تصویر زیر :

2. بعد از آنکه ما این مربع مسطیل را رسم کردیم, قصد داریم به قسمت بالا و پایین آن یک شکل فانتزی بدهیم که برای این امر به این آدرس بروید : Edit > Transform Path > Warp و از طرح و تصویر زیر استفاده کنید :

3. اگر مرحله قبل را با موفقیت گذرانده باشید طرح شما درست شبیه به مال من میشود :

4. روی لایه ای که ایجاد کرده اید راست کلیک کنید و گزینه Blending Options را انتخاب کنید. و در ادامه روی گزینه Inner Glow کلیک کنید و تنظیمات را مطابق تصویر زیر انجام دهید.

در ادامه روی گزینه Gradient Overlay کلیک کنید و تنظیمات این بخش را نیز مطابق تصویر زیر اعمال نمائید.

و در آخر روی گزینه Stroke کلیک کنید و تنظیمات نهایی این بخش را نیز اعمال نمائید.

5. اگر مراحل قبلی را درست مانند من انجام داده باشید طرح شما شبیه به تصویر زیر خواهد شد :

6. در این قسمت ما قصد دارید محیط طراحی را کمی فانتزی کنیم که برای این کار به دستورات من خوب توجه کنید. سندی با سایز 500 در 500 با بکگراند حالت شفاف (transparent) ایجاد کنید. سپس با استقاده از ابزار ellipse tool تعدادی بیضی و دایره بسازید. (زمانی که شما در حال طراحی کردن این دایره و بیضی ها هستید مطمئن شوید که از دکمه های زیر استفاده میکنید , برای کم کردن از شکل (-) و اضافه کردن از شکل (+) استفاده نمائید.)

7. شکل هایی به صورت اتفاقی ایجاد کنید, چون همین حالت اتفاقی نمایی زیبا و فانتزی به کار شما خواهد داد. در تصویر زیر من به صورت مثال در این نوع طراحی کرده ام :

8. در این مرحله ما میخواهیم تصویری که در مرحله قبل ایجاد (ساختید) را به صورت یک براش (brush) در بیاوریم که در طراحی از آن استفاده کنیم. برای این امر منوی Edit را باز کنید و گزینه Brush preset را انتخاب کنید و یک اسم به صورت دلخواه برای نام براشی که ایجاد کرده اید بگذارید.

9. بعد از اینکه تصویری که طراحی کرده بودید و به براش تبدیل کردید, بیائید به لایه اصلی که طراحی کرده بودیم برگردیم, یک لایه جدید ایجاد کنید که برای این کار میتوانید از کلیدهای میانبر CTRL+ALT+SHIFT+N استفاده کنید, سپس ابزار brush Tool را انتخاب کنید و قلم نقاشی (براش) که در مرحله قبل درست کرده بودید را انتخاب کنید و در گوشه لایه شروع به نقاشی کنید, مطمئن شوید که رنگ پیش زمینه همانند رنگ پیش زمینه کلی طرح هست در پرونده من رنگ پیش زمینه با کد #343434 است.

در تصویر بالا من از قلم های مختلفی استفاده کرده ام, شما نیز میتوانید از قلم های مختلفی استفاده کنید. برای این منظور سری به قسمت ابزارهای تالار گرافیکی مجید آنلاین بزنید, مطمئن هستم دست خالی نخواهید برگشت.

10. در این قسمت ما قصد دارید یک حالت جدید به پیش زمینه خود بدهیم که برای این منظور از قدرت پترن (Pattern) در فتوشاپ بهره میبریم, برای این منظور سندی جدید در سایز 3 در 3 پیکسل بسازید. درست مانند تصویر زیر :

این سند را تا 1600% درصد بزرگنمایی کنید (ZOOM کنید) و با استفاده از ابزار Pencil Tool سه نقطه روی آن بکشید. درست مانند تصویر من :

سپس برای اینکه تصویری که در مرحله قبل ساخته ایم را به پترن تبدیل کنیم, منوی Edit را باز کنید و در نتیجه گزینه … Define Pattern را انتخاب کنید. برای طرحتان یه اسم به دلخواه انتخاب کنید و OK را بزنید. (برای فهم بیشتر و اطلاعات بیشتر در زمینه پترن و امکانات جادویی آنها در آینده مقاله ای تنظیم کرده ایم که در همین مکان میگذارم که نهایت استفاده را ببرید, زیرا این پترن در آموزشهای بعدی خیلی کاربرد خواهد داشت و شما را با ساختن انواع پترن ها مختلف آشنا خواهم کرد.)

11. حالا شما میتوانید این سند پترنی که ساخته اید را مشاهده کنید, ابزار Bucket tool (سطل رنگ) را انتخاب کنید و باقی مراحل را از روی تصاویر زیر طی کنید.

من در تصویر بالا تمامی پترنها را تار کرده ام که پترن مورد نظر به درستی قابل تشخیص باشد.

12. حالا با استفاده از سطل رنگ لایه اصلی را با این طرح پر کنید. (یادتان باشد این عملیات را بر روی لایه پیش زمینه انجام دهید.)

13. حالا طرح کلی شما کامل شده و ما در این قسمت میبایست به جزئیات بپردازیم, به طرحی که ساخته اید مقداری متن و دکمه اضافه کنید, این امر بسته به نوع کار و سلیقه شما دارد. برای مثال من این چیدمان را حاضر کرده ام. (برای اضافه کردن دکمه از ابزار ellipse tool استفاده نمائید)

14. اگر در تصویر بالا دقت کنید مقداری دکمه ها ساده است و یک نوع نا هماهنگی به کل طرح ما داده است, ما در اینجا قصد دارید مقداری دکمه ها را فانتزی کنیم, برای این امر روی دکمه هایی که ایجاد کرده اید راست کلیک کنید و گزینه Blending Options را انتخاب کنید و سپس گزینه Inner Glow و تنظیمات را مطابق تصاویر زیر اعمال کنید. درست مانند مرحله 4 . نکته ای که گفتن آن خالی از لطف نیست این است که هر چقدر ایده و ذهن شما خلاق باشد طرح شما نیز از حالت زیباتری بهره خواهد گرفت.

در ادامه روی گزینه Gradient Overlay کلیک کنید و تنظیمات این بخش را نیز مطابق تصویر زیر اعمال نمائید.

و در آخر روی گزینه Stroke کلیک کنید و تنظیمات نهایی این بخش را نیز اعمال نمائید.

15. نتیجه کلی تنظیمات شما بر روی دکمه ها چنین خواهد شد :

16. حالا شما میتوانید با استفاده از ابزار ellipse tool دایره هایی زیر دکمه ها بکشید و نصف آن را پاک کنید برای یک حالت فانتزی به کار, مانند کاری که من کرده ام.

17. در پایان میتوانید هر آنچه که نیاز دارید و فکر میکنید طرح شما را زیبا میکنید اضافه کنید, برای مثال طرح من دیگر آماده شده است که میتوانید در زیر آن را مشاهده کنید :

دانلود فایل PDF آموزش با حجم 483 کیلوبایت
دانلود فایل HTML آموزش با حجم ۱۶۷۵ کیلوبایت
دانلود سورس آموزش – PSD با حجم 569 کیلوبایت

امیدوارم از این آموزش لذت بده باشید, این آموزش را سعی کردم با تمامی جزئیات بیان کنم تا دوستانی که آشنایی چندانی با فتوشاپ ندارند هم دچار مشکل نشوند. در این آموزش هدف ما قدرت مانور دهی ابزار شیپ (Shape) و زیر مجموعه های آن بود که به راحتی تمام و قدری شما این را ثابت کرد که میتوان یک وب سایت زیبا را خلق نمود.
مقاله ها در باب طراحی انواع پرتال ها بسیار است, چندین آموزش را در صدد آماده کردن هستم که اگر برای چاپ در مجله گرافیکی گاما نرفت همینجا قرار میدهم. برای سهولت کار دوستان و فهم بیشتر فایل PSD یا سورس آموزش را قرار داده ام, که امیدوارم برای شما دوست عزیز مفید واقع بشود.

موفق باشید.
عرفان

برچسب‌ها: shabe yalda, وب سایت تجاری, یلدا, پروفایل شخصی, yalda, آموزش, آموزش فتوشاپ, آموزش وب سایت, شب یلدا, طراحی وب سایت, طراحی پروفایل تجاری, عیدی, عیدی شب یلدا