شما اینجا هستید: خانه / آموزش های مقدماتی فتوشاپ / آموزش گام به گام طراحی سایت در فتوشاپ (قسمت اول)
آموزش گام به گام طراحی سایت در فتوشاپ (قسمت اول)

آموزش گام به گام طراحی سایت در فتوشاپ (قسمت اول)

سلام خدمت بروبچ همیشگی سایت آی فتوشاپ

خب دیگه وقتشه یه حال اساسی بهتون بدم همینجوری که از اسم آموزش پیداست خیلیا منتظر این لحظه بودن (ها هاها)که طراحی قالب رو یاد بگیرن.کاملا اختصاصیه در حد بوندس لیگا ولی خب من نمی خوام توی این آموزش قالب رو تموم کنم چون نسبت به حجم زیاد آموزش من نمی تونم اون رو توی یک آموزش تموم کنم و برای خود شما هم خسته کنند میشه پس بریم سراغ ادامه ی مطلب

مشخصات آموزش

سطح آموزش:مبتدی تا حرفه ای
زمان مورد نیاز:۱ ساعت
نرم افزار مورد نیاز:فتوشاپ سی اس ۶

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

بخش اول-طراحی هیدر سایت

در گام نسخت باید یک سند جدید با مشخصات زیر ایجاد کنید.

آموزش طراحی سایت در فتوشاپ-قسمت اول

چون سایز قالب بزرگ میشه به صورت اتوماتیک زوم اوت میشه که می تونید برای زوم کردن از میانبر های موجود در پنل فتوشاپ یا با استفاده از کلید های زیر زوم  این کنید

CTRL++
خب الان وقتشه که از ابزار خط کش استفاده کنیم شاید تا الان خیلی از شما ها با ابزار خط کش کار نکرده باشید ولی بدونید برای ساخت سایت یکی از مهترین ابزار ها به شمار میاد پس برای فعال سازی خط کش فتوشاپ یکبار کلید های زیر رو بزنید.

[Ctrl+R]

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

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

خب حالا یک لایه ی جدید ایجاد کنید اسم این لایه رو

HEADERبزارید

سپس یکبار کلید ام رو بزنید و مانند تصویر این محیط رو انتخاب کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

توجه کنید از بالا تا جایی که خط آبی خط کش هستش پایین بیایید مثل تصویر بالا…

گام دوم

حالا می خوایم افکت هایی(استایل)به این لایه بدیم که این لایه هیدر سایت مارو تشکیل میده پس لایه مشکی هیدر رو انتخاب کنید و سپس دوبار روی لایه کلیک کنید تا استایل مورد نظر خودمون رو بهش بدیم

این استایل هارو به همین لایه ی هیدر بدید

design psd site-4

استایل دوم

*.توجه عکس زیر متحرک است دقت کنید

design-psd-site-5

آموزش طراحی سایت در فتوشاپ-قسمت اول

خب الان شما باید این رنگ رو به بکگراند بدید

۹e9e9e

الان تصویر هیدر من تا اینجاآموزش طراحی سایت در فتوشاپ-قسمت اول

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

من یه قسمت رو برای لوگو در نظر گرفتم سمت چپ حالا شما هر لوگویی دوست دارید بدید این لوگوی من تا اینجا

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

گام سوم

حالا با رنگ زیر

۳۳۹eaa

از قسمت بالا به مقداری که در تصویر می بینید ۴۱ سانتی متر یک مستطیل رسم کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

الان می خوایم بریم سراغ بقیه ی ماجرا ابزار زیر رو انتخاب کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

با همون رنگی که گفتم یک شکل مانند من رسم کنید توجه کنید از قسمت تولبار رِدیوس رو روی ۵۰ درصد تنظیم کرده باشید

آموزش طراحی سایت در فتوشاپ-قسمت اول

این کادر به عنوان قسمت سرچ ما  میشه ها حالا این استایل رو به همین شکل بدید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

search box

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس در یک لایه ی جدید بالای همین لایه اون رو با رنگ زیر پر کنید

۰۵۴۵۴c

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

حالا شما می تونید قسمتی که اضاف مونده از رنگی که ایجاد کردیم یک آیکون سرچ یا متن مورد نظر خودتون رو بنویسید من حرف اس رو نوشتم شما می تونید به سلیقه ی خودتون رو بسنجید همش که نمیشه کپی کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

گام چهارم

حالا با فونت بی یکان یا فونتی که نزدیک به این فونت هست متن جستجو کنید رو با رنگ زیر تایپ کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

خب الان میریم سراغ اینکه یگم به بکگراندمون جون بدیم چیکار می کنیم اول تصویر زیر رو دریافت می کنیم

آموزش طراحی سایت در فتوشاپ-قسمت اول

خب الان میریم سراغ اینکه یگم به بکگراندمون جون بدیم چیکار می کنیم اول تصویر زیر رو دریافت می کنیم

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

حالا به تصویر بالون مراجعه کنید و سپس یکبار کلید های زیر رو بزنید

CTRL+A

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

CTRL+C

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

ALT+SHIFT+CTRL+V

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

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

حالا لایه ی بالون رو انتخاب کنید و یکبار کلید های زیر رو بزنید تا بتونید سایز اون رو یکم کوچیکتر کنید

CTRL+T

و سپس اون رو مانند تصویر زیر تغییر بدید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

گام پنجم

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

رنگ زیر رو انتخاب کنید

۷becf0

ابزاز زیر رو انتخاب کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس یک شکل مانند تصویر زیر رسم کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس این استایل رو به این شکل بدید

آموزش طراحی سایت در فتوشاپ-قسمت اول

تصویر شما باید الان اینجوری شده باشه

آموزش طراحی سایت در فتوشاپ-قسمت اول

اگه با دقت ببنید یک لایه بین شکل مستطیل و اون هیدر ایجاد کردیم که اون هارو از هم متمایز میکنه!خب حالا شما پس از رسم شکل خط کش فتوشاپ رو فعال کنید و به مقدار ۱۰ سانت ۱۰ سانت مانند تصویر زیر جدا کنید ما می خوایم گزینه های مورد نیازمون رو درچ کنیم

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس حالا مانند من این قسمت  رو انتخاب کنید و سپس با با ابزار گرادینت از سمت بالا به پایین درگ کنید تا این قسمت پر بشه توجه کنید حتما رنگ فورگراندتون رنگ زیر باشه

۳۴۶۸۶a

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

مانند تصویر زیر

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس از این قسمت با زدن کلید های زیر

CTRL+J

کپی بگیرید و اون رو به قسمت های دیگه که نیاز داریم پست کنید می تونید به اندازه ی ۱۰ سانتی که جدا کردید رنگ بریزید

آموزش طراحی سایت در فتوشاپ-قسمت اول

من وقتی که جابجا میکردم این شکل هارو به هم نچسبودنم یکم فضا گذاشتم تا بیشتر کلید ها به چشم بیاد……..

دقت کنید اگه فاصله ی خط کشی شما با شکل هایی که کشیدید هماهنگ یا هم سایز نیست دلیل بر اشتباه بودن نیست و شما سعی کنید با دقت کار کنید یا اینکه یکم عقب تر برید و با اندازه ی ۱۵ سانت خطی کنید همون جور توی تصویر می بینید من خونه ی اول رو بزرگتر در نظر گرفتم چون کلید خانه بیشتر وقت ها از سایر گزینه ها بزرگ تره ولی خب با همون اندازه من سایر گزینه هارو ایجاد کردم ولی شما گزینه هارو با توجه به خط کشی ها پر کنید

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

ادامه دارد…

منتظر قسمت بعدی آموزش باشید

آموزش طراحی سایت در فتوشاپ-قسمت اول

درباره ی حمید

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

۳۸ دیدگاه

  1. سلام دوستان.من لایه جدید رو که باز میکنم دقیقا همینجوری که گفتین عمل میکنم ولی وقتی میرم استایل بهش بدم هیچ تغییراتی صورت نمیگیره.اصلا انگار قسمت سلکت شده جزو لایه جدید نیست.

  2. سلام به حمید عزیز. اقا این امکانی که میخواستید بزارید واسه کاربرا چی شد پس ما هنوز منتظریم:D همونی که کاربرا کارهاشونو به نمایش میزارند؟ مرسی:X

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

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

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

  5. سلام میشه توضیح بدین چجوری لوگوی سایتتونو رو تصاویر قرار میدین؟

  6. ممنون از آموزش بیشتر از این اموزشا بذارید

  7. آقااا سلااااام دمت گرم عالی بود …
    حالا چجوری اچ تی ام ال اش کنم داداش؟؟؟؟؟
    دمت گرم اگه یه آموزش واسه اینم بزاری دیگه برادری رو تموم میکنی !!!

  8. سلام خسته نباشید میشه دقیقا و کامل بگید تو قسمتی ک میگید ۱۰ سانت ۱۰ سانت جدا کنید چجوری میشه این کارو کرد؟؟؟
    شما دستی این کارو کردید یا جایی هست ک مثلا ۱۰ سانت بهش اندازه میدی خودش واست جدا میکنه؟
    اگه میشه توضیح بدید
    ممنون

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

  10. سلام ممنون از آموزش عالیتون
    من تو قسمتی که باید به لایه header گرادیانت بدم توی قسمتی که نشون دادم بعد از وارد کردن رنگ مورد نظر رنگش خود به خود به aedadf تغییر میکنه اگه میشه بگید چکار کنم تا درست بشه
    http://upload.tehran98.com/upme/uploads/d4ce087fe2d295041.jpg

  11. سلام داداش اگر میشه سریعتر قسمت های بعدی هم بزارین.و اگر امکانش هست تبدیل psdبه html رو هم بزارین.ممنون.

  12. سلام تصویر من این شد چند جا مشکل داشتم ولی بازم این رو درست کردم دیدم کسی تا حالا نمونه نداده.

    وقتی میگید انتخاب کنید قسمت رو با چه ابزاری باید سلکت کنم اون قسمت رو؟

    تو بعضی قسمت ها من رنگ شما رو میزدم برای شما ابی بود برای من صورتی میشد وقتی میزدم؟؟

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

    http://8pic.ir/images/63446035345407180291.jpg

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

  13. سلام خسته نباشید خیلی سایت مفیدی دارید ، موفق باشید
    فقط میشه آموزش تبدیل psd به html رو بزارین ؟؟
    ممنون میشم

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

  15. انتخاب رنگ هات خیلی خوب بود .
    حمید جان خسته نباشید .
    استفاده کردیم .

  16. salam dash hamide gol
    che khob. eyval. 2 ta ghaalebe mokhtalef ro darin marhale be marhale mirin jolo
    khaste nabashi hamid jaan.

  17. سلام
    به به شوخی سال نوبد په !!!!
    مرسی از همه ی ادمینای این سایت عزیز

  18. بــــــــــــــــــــه آقا حمید گل از این ورا
    آقا یه چیزی
    این اموزشو که اقا احسان گزاشته
    الان ما کدومو انجام بدیم

  19. ممنون بابیت آموزش خوبتون

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

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

بپر بالا !