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

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

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

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

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

19

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

22

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

32

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

41

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

51

62

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

71

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

81

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

91

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

101

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

10_1

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

111

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

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

11_1

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

11_2

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

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

12_0

12_001

12_01

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

12_02

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

132

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

141

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

41

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

51

62

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

71

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

152

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

161

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

171


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

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

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

Advertisements

برچسب‌ها: , , , , , , , , , , , ,

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

  1. فرشاد پالیده Says:

    منتظر ادامه اش هستیم

  2. مانی Says:

    سلام
    خیلی عالیه

  3. پويا Says:

    سلام
    خيلي عاليه گل كاشتي
    مي تونم ازتون راهنمايي بگيرم
    من مي خوام براي شركتمون يه صفحه مثل صفحه http://www.maysun-co.com طراحي كنم اما نمي دونم چطوري
    لطفا كمكم كنيد

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

  4. علی گراف Says:

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

    عرفان :
    چشم عزیز… حتماً مزاحم میشم !

  5. بهنام مکس Says:

    سلام عرفان کارت جالبه خوشم اومد
    من در زمین هفتوشاپ خوبم ولی نه به اندازه تو شاهکار کردی
    من یک وبسایت راه اندازی کردم نیاز به چند تا گرافیک کار دارم تا کمکم کنن
    برای مدیریت سایت و ساخت مقالات اموزش و ویدئو آموزش
    دارم یک محیط سالم برای گرافیک کارا دوبعدی و سه بعدی ایجاد میکنم
    به افراد همچون شما احتیاج دارم
    تفاوت وبسایت ما اینه که اموزش ها رو به صورت روان وویدئویی در می اوریم
    با حجم بسیار کم مثلا1 مگ با نرم افزار مخصوص ادوب
    منتظر جوابت هستم

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

    بابت دعوتت مرسی …

    عرفان ^_^

  6. بهنام مکس Says:

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

    عرفان :
    خواهش میکنم … مشکلی نیست آموزش ها رو در سایت یا وبلاگ خودتون قرار بدهید .. اگر هم یه لینک کوچولو واسه منبع بزنید ممنون میشم …

    در مورد تبادل لینک صبر کنید تا یه سر و سامونی به این لینک دوستان بدم و بعدش حتماً تبادل لینک میکنیم ..

    موفق باشید

  7. سعید . م Says:

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

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s


%d وب‌نوشت‌نویس این را دوست دارند: