campaign-edianeh-98

آموزش طراحی قالب (فصل دوم - جلسه اول) : طراحی سرصفحه (header)



visibility  
mode_comment   ۱۱۰

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

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

بسیار خب حال میریم سراغ آموزش.

گرافیک قالب

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

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

  1. سرصفحه (header)
  2. ستون های کناری(sidebar)
  3. قسمت محتوا(content)
  4. پانوشت (footer)

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

حال تصاویر را در پوشه ی images مربوط به قالب انتقال دهید و فونت ها رو نصب کنید : بسیار خب کارمون را شروع می کنیم : اول فایل psd که در جلسه قبل ایجاد کردیم رو باز کنید : از منوی view گزینه new guide رو انتخاب کنید و طبق تصاویر زیر خط راهنما را ایجاد کنید : و دوباره در این حالت با ایجاد خطوط راهنما فضایی که در وسط قرار دارد برابر با 1024px که عرض استاندارد نمایشگرهای کامپیوتر است.

قسمت پس زمینه

همانطور که می بینید ما در پس زمینه از تصویر استفاده کردیم (pattern) برای اینکه در فتوشاپ تصویری را به pattern تبدیل کنیم کارهای زیر رو انجام دهید 1. از تصاویری که دانلود کردید فایل body-bg با فتوشاپ باز کنید 2. از منوی edit گزینه define pattern رو انتخاب کنید و ok رو بزنید تا تصویر به pattern تبدیل شود. 4. به فایل قالب برگردید 3. بر روی لایه background دابل کلیک و ok کنید تا از حالت قفل خارج شود، سپس دوباره بر روی لایه دابل کلیک کنید تا پنجره blending optoins باز شود و استایل زیر رو بهش بدین

همانطور که می بینید، تصویرمان به patternها اضافه شده است آنرا انتخاب کنید بر روی ok کلیک کنید تا استایلمان اعمال شود. حال بر روی لایه کلیک راست کنید و layer properties رو انتخاب کنید و نام آن را به background تغییر و ok کنید.

قسمت سرصفحه (header)

ابتدا از منوی layer گزینه new و سپس group رو انتخاب کنید و نام آن را header قرار دهید. 1. یک خط راهنمای جدید طبق تصویر زیر ایجاد کنید : 2. ابزار rectangle tool رو انتخاب کنید و طبق تصویر زیر یک مستطیل ایجاد و آن را در قسمت بالای قالب سایت قرار دهید

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

سپس نام لایه رو به header-bg تغییر دهید 3. ابزار نوشتن (type) رو انتخاب کنید یک متن با رنگ سفید (#ffffff) و اندازه فونت 72px ایجاد کنید، بنده از فونت entezare zohoor 3 ** استفاده کردم. که همراه فایل هایی که دانلود کردید وجود داره

info نکته :

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

4. سپس استایل زیر رو طبق تصویر بهش بدین 5. یک متن دیگر با فونت b yekan و اندازه 30px و رنگ سفید با عنوان "یک سایت دیگر با وردپرس" ایجاد کنید و استایل زیر رو بهش بدین : محل قرارگیریش هم مانند تصویر زیر : 6.حال آیکن های شبکه های اجتماعی رو وارد فایل کنید و در بالا سمت چپ header مانند تصویر زیر قرار دهید. سپس استایل زیر رو بر روی همه آن ها اعمال کنید در قسمت Layers دو لایه متنی مربوط به لوگو رو با نگه داشت دکمه CTRL انتخاب کنید و سپس CTRL + G رو بزنید تا این دو لایه در یک گروه قرار گیرند، حال در قسمت لایه ها بر روی group1 کلیک راست کنید و group properties رو انتخاب کنید و نام گروه رو به logo تغییر بدین. همین کار رو برای آیکون شبکه های اجتماعی انجام بدین و نام گروه رو sn-icons قرار بدین حال opacity گروه sn-icons رو به 50 درصد تغییر بدین. حال به ایجاد قسمت جستجو میرسیم : 1. ابزار rounded rectangle tool رو انتخاب کنید و یک مربع با اندازه های زیر ایجاد کنید : و آن را در پایین سمت چپ header قرار دهید. سپس استایل های زیر رو به اون بدین. سپس یک متن با فونت b nazinin و اندازه ی 18px و رنگ سفید ایجاد کنید و آن را مانند تصویر زیر در داخل باکس جستجو قرار دهید : حال تصویر search-btn را وارد فایل کنید و آن را داخل باکس جستجو سمت چپ آن قرار دهید. حال این سه لایه (shape1 و لایه متنی و تصویر) رو با هم انتخاب کنید و آن ها را در داخل یک group جدید با نام search-box قرار دهید.

منوی سایت

حال به ایجاد قسمت منوی سایت رسیدیم. ابتدا یک خط راهنما طبق تصویر زیر ایجاد کنید : 1. ابزار rectangle tool رو انتخاب کنید و یک مربع با ابعاد زیر ایجاد کنید : و آنرا در زیر header و در بین خطوط راهنما قرار دهید، سپس نام آنرا به menu-bg تغییر دهید. 2. بر روی لایه ی header-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید 3. سپس بر روی لایه menu-bg کلیک راست کنید و گزینه paste layer style رو انتخاب کنید تا استایل لایه header-bg بر روی لایه menu-bg اعمال شود 4. سپس استایل inner-shadow آنرا مانند تصویر زیر ایجاد کنید : 5. حال تصویر home-icon را وارد فایل کنید و در ابتدای منو قرار دهید 6. حال یک لایه متنی جدید با فونت b nazanin و اندازه 20px و رنگ سفید ایجاد و آیتم های منو رو با فاصله 8فضای خالی (space) بنویسید. و سپس استایل زیر رو به متن بدین : حال باید به همچین نتیجه ای رسیده باشید : در آخر این سه لایه (menu-bg و icon و متن منو) را انتخاب کنید و اون ها رو در یک group جدید با نام menu قرار دهید. خب خسته نباشید.فایل رو ذخیره کنید و از نرم افزار خارج شوید، در جلسه بعد به ادامه آموزش می پردازیم. اگر سوالی براتون پیش اومده در بخش نظرات مطرح کنید.

comment دیدگاه کاربران
hajian1

سلام
نصب فونت هارادرویندوز7رالطفاًمراحلش راراهنمایی فرمایید
باتشکر

لقمان آوند

روی فونت راست کلیک کرده و گزینه ی install رو بزنید …

علیـــــ

سلام دوستان
مرسی از اموزشتون
اما من هرچی دانلود میکنم دیده نمیشه
نمیدونم چطوری به پی دف تبدیلشون کنم .کلیم برنامه پی دف نصب کردم
میشه ی کمکیم کنید به من .ویندوزم7 😥 😥

سجاد دریس

سلام.
لینک دانلود مشکلی نداره، برای مشاهده فایل های pdf هم برنامه های زیادی وجود داره از جمله adobe reader
foxit reader و …

هادی

سلام دادا

واقعا آموزش خیلی عالی ایه.

بی صبرانه منتظر نظر بعدی هستم

بدرود

hajian1

سلام
خیلی ممنون ازکمک های بین آموزش که عنایت می کنید
وبی نهایت سپاس ازنحوه خیلی عالی این آموزش

سجاد دریس

سلام.
خواهش میکنم.
ممنون.

shatel

سلام یه سوال
فرض کنید ما کلاً قالب رو تموم کردیم و نوشتیم …
میشه همینجوری تو بلاگفا قرارش بدی یا باید کدهای خاصی توش نوشته بشه؟؟؟؟؟

لقمان آوند

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

shatel

از این صفحه میشه استفاده کرد؟
http://www.blogfa.com/Help/Show.aspx?id=template

لقمان آوند

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

shatel

چطور تو فتوشاپ یه عکس رو تار و کمرنگ تر می کنند؟

سجاد دریس

سلام.
2 روش وجود داره،
اگه میخوایید کل تصویر تار بشه از منوی filter گزینه blur و زیر گزینه blur رو انتخاب کنید
اما اگه میخوایید قسمتی از تصویر رو تار کنید از ابزار blur استفاده کنید (به شکل یک قطره آب هست).

amirchermahini

سلام و عرض ادب وارادت
ممنون از بابت زحماتتون
اقای دریس پیرو زحمات قبلی یه سوال دیگه دارم
در همون سایت که معرفی کردم و کد قالبش رو برای حذف باکسهای همنام کشیدید حالا یه سوال دیگه دارم
در قسمت بالا و همون باکسها وقتی موس روی عکسها میره یه چیزی شبیه ذره بین فعال میشه و وقتی روی اون کلیک میکنیم عکس رو در اندزه واقعی در یه پنجره pop up باز میکنه
اگه ممکنه و مقدوره راهنمایی کنین از چه کدی برای اینگونه موارد باید استفاده کرد
با تشکر وارزوی توفیق
ادرس سلیت مذکور
mywindows.ir

سجاد دریس

سلام.
این یک افزونه جی کوئری هست، به نام fancy box تو انجمن سایت بگردید آموزشش وجود داره

amirchermahini

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

سجاد دریس

سلام.
همچین اسلایدری با css و html و jquery ساخته شده.
درضمن با فتوشاپ فقط طرح اسلایدر (دکمه ها، سایه و ..) رو میسازن.

amirchermahini

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

سجاد دریس

سلام.
کار بسیار سختیه که یک اسلایدر رو کامل از صفر طراحی کرد. باید خیلی به jquery مسلط بود. که من دانشش رو ندارم.
عموما از اسلایدر های آماده استفاده کنید، و فقط استایلشون رو به دلخواه تغییر بدین.
پیشنهاد من nivo slider و wow slider هست.

هادی

با سلام

خسته نباشید، واقعا آموزش بسیار خوبی بود.

تشکر از شما که برای آموزش هاتون اینقدر زحمت میکشید.

یه سوال داشتم از خدمتتون. من چطور میتونم جی کوئری رو یاد بگیرم؟ آیا شما یه کتاب فارسی سراغ دارید که بشه توی جی کوئری رو یاد گرفت؟ من کتاب معروف jQuery Novice to ninja رو دارم ولی چون انگلیسیه ازش سر در نمیارم. خواهشا کمک بکنید به من.

خیلی ممنون از شما

سجاد دریس

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

amirchermahini

اقا ممنون تازه راه برداشتن ایکن سایت سازنده wow slider رو پیدا کردم
خیلی ممنون از راهنمایی هاتون

هادی

دوباره سلام. خیلی ممنون از شما. یه سوال دیگه هم از خدمتتون داشتم، اگه جی کوئری رو یاد بگیرم ولی جاوا اسکریپت بلد نباشم، مشکل پیش میاد؟ خیلی ممنون از شما و معذرت به خاطر زحمت دادن… 😳

لقمان آوند

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

amirchermahini

سلام و تشکر از بابت راهنمایی های شما
با wow slider و چند نرمافزار مشابه دارم کار میکنم اما یه مشکل خیلی بزرگی که دارن در نهایت و نتیجه کار یه اسم و ایکن از خود شرکت سازنده نرم افزار در نسخه های Trial روی اسلاید شو میمونه که نتیجه کار رو خیلی زشت میکنه
حتی در چند منبع خارجی واسه برداشتن ایکن سایت سازنده توضیحاتی رو خوندم که در یکی از فایلهای jqurey باید یه گزینه show() رو به hide() تغییر داد تا ایکن بره اما باز هم نتیجه نداد
چطور میتونم یه منبع از jquery های اماده برای اسلاید شو پیدا کنم
ایا شما ادرسی و یا کتابخانه ای از jqury میشناسید
ممنون میشم معرفی کنین چون با css زمانبندی رو مینویسم اما در java و jqury ها مشکل دارم و میدونم نسخه های اماده هست اما نمی دونم از کجا باید پیداشون کنم
با تشکر وارزوی توفیق

سجاد دریس

سلام.
بنظرم http://plugins.jquery.com/ کاملترین مجموعه هست

amirchermahini

ممنون از راهنمایی شما
یه سوال دیگه
من در گوگل یه دومین رایگان گرفتم و یه ایمیل پروفشنال هم روی دومین ساختم بنام raha@photomehr.com اما موقعی که میخوام وارد این ایمیل بشم پیام میده که دومین خودتان رو verify کنین حالا سوال اینه چطور باید این کار رو انجام بدم
چون هر بار میخوام وارد این ایمیل بشم مینویسه
verification email was sent to your inbox please check your inbox to verify your domain
چطور میتونم به اینباکس این ایمیل دسترسی داشته باشم
با تشکر وارزوی توفیق

سجاد دریس

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

amirchermahini

سلام
و تشکر از راهنمایی های شما
اگه امکان داره در این 4 عرض منو راهنمایی کنین که برای هرکدام چه مقداری رو وارد کنم که استاندارد ترین باشه در طراحی ریسپانسیو
تبلت ها
landscape: ….px
portrate:……px
موبایلها :
landscape: ……px
portrate: …….px
با تشکر در صورت امکان استاندارد عرض ها رو بنویسید که چه عرضی از نظر اصولی استاندارد ترین هست
شاد و موفق باشید

سجاد دریس

سلام.
در انجمن بگردین پاسختون رو پیدا میکنید.

amirchermahini

راستی یه سوال دیگه
اگر مثلا در html بنویسیم
اما بخواهیم این main فقط در عرض مثلا 400px نمایش داده بشه اما مثلا در عرض اصلی یا مثلا 1200px نباشه چطور باید نوشت چون وقتی در style.css اصلی از کد display: none استفاده میکنم دیگه در هیچکدوم از اندازه ها نشونش نمیده و وقتی هم در استایل اصلی کد display: none رو برمیدارم در اندازه 1200px هم نشونش میده و باعث بهم ریخته شدن کار میشه
با تشکر وارزوی توفیق
در صورت امکان در این مورد حتما منو راهنمایی کنین ممنون میشم

سجاد دریس

سلام.
دوست عزیز هنگام نوشتن نظر نکته ای که ذکر شده رو هم بخونید
“سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .”

amirchermahini

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

لقمان آوند

سوالتون رو در انجمن html و css بپرسید دوست عزیز …

سجاد دریس

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

amirchermahini

سلام اقای آوند
انجمن ارور 403 میده از دیروز تا بحال
مشکل از سیستم منه یا از انجمنه
راستی یه سوال دیگه چرا وقتی برای پست گذاشتن و طرح سوال در قسمت کامنت کلیک میکنیم اول یه new tab تبلیغاتی باز میشه و بعدا جازه کلیک کردن در قسمت کامنت رو میده
چطور میشه این گزینه رو غیر فعال کرد
ایا adblocker میتونه در google chrom جلوی باز شدن این گونه پنجره های تبلیغاتی رو بگیره
با تشکر
منتظر راهنمای های شما هستم

لقمان آوند

سلام
انجمن الان مشکلی نداره . دیروز موقتا بسته بودیمش .
فکر نکنم Adblocker بتونه . چون به شکل خاصی کدنویسی شده .
چه صفحه ای باز میشه ؟ سایت هفت آگهی رو اگه میگید اون کار خودمونه و در 10 درصد بازدیدا او باز میشه …

رها

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

لقمان آوند

مشکلی نداره انجمن
احتمالا isp شما کش کرده
باید صبر کنید تا از کش در بیاد ..

shatel

سلام;
سه سوال
1-تو فتوشاپ چطور میشه یک لایه رو بزرگتر کرد؟
2-این قالبی که طراحی میشه فکر کنم1024*768 حالا فرض کنیم رزولشن صفحه یکی بزرگتر بود و قالب رو اجرا کرد اونوقت قضیه چیه؟
3-میشه هدر رو بزرگتر از حدی که تو آموزش گفته شد بگیرم؟

لقمان آوند

برای تغیر سایز لایه :

Select the layer
Type Ctrl-T to transform
Drag on corner handles (hold Shift button to constrain proportions)
Double-click inside to commit

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

shatel

سلام
استایل لایه ها حتماً باید همون جوری باشه که تو عکسها هست…؟یا اون جوری واجب نیست باشه؟
راستی الآن این ها عکس هستن چطور به عکس ها لینک میدید؟

سجاد دریس

سلام.
استایل رو هرجوری که میخوایید میتونید قرار بدین، اما چونکه من بعدا طبق این استایل ها میخوام کدهای css رو بنویسم فعلا بهتره مثل تصاویر باشه.

هادی

در ضمن این یادم رفت بگم، این لینکی که دادین ، کار نمیکنه، منظورم لینک دانلودشه

لقمان آوند

بررسی شد . لینک سالمه و مشکلی نداره .

ehsan

در اخر فرمتش چی باشه؟ ممنون میشم

سجاد دریس

سلام.
فرمت فایل psd باشه.

hajian1

سلام
درموردانتخاب چندلایه لطفاًتوضیح بیشتری عنایت کنید
البته ساده ترین روش
باتشکر

سجاد دریس

سلام.
با نگه داشتن دکمه CTRL بر روی لایه های موردنظر کلیک کنید تا انتخاب بشن.

رضا

سلام اگر می شه سریعتر بزارید نمی تونم صبر کنم 🙁 عالی هستید 😛

مهدی کاظمی

عالی بود خیلی استفاده کردم

نیما

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

سجاد دریس

سلام.
با کشیدن و رها کردن (drag and drop) این کار رو انجام بدین.

بهناز

سلام و خسته نباشید

3. بر روی لایه background دابل کلیک و ok کنید تا از حالت قفل خارج شود، سپس دوباره بر روی لایه دابل کلیک کنید تا پنجره blending optoins باز شود و استایل زیر رو بهش بدین

این قسمت رو اصلا نمی فهمم

یه سوال دیگه هم این که من از cs6 استفاده میکنم
میتونم با آموزش شما پیش برم ؟

ممنون

سجاد دریس

سلام.
دیگه ساده تر ازاین بلد نیستم توضیح بدم!
این تصویر رو مشاهده کنید

sama

سلام
ممنون از آموزش کاملتون
من وقتی میخوام اون نمادهای فیسبوک و RRS و… رو روی هدر قرار بدم به رنگ طوسی درمیان یعنی رنگ هدر و رنگ اصلیشونو ندارن حالت هم روی DARKANنیست NORMALهست هرچی هم رنگشو تغییر میدم تغییر پیدا نمیکنه حتی رنگ نوشته هم فقط طوسی میشه من باید چیکار کنم؟؟؟؟؟؟

سجاد دریس

سلام.
فکر کنم هنگام ایجاد فایل جدید color mode رو روی rgb color نذاشتین.
فایل رو از اول ایجاد کنید. و color mode روی rgb باشه.

منوچهر

با سلام و عرض ادب مرسی از آموزش خیلی عالی شما
ولی این پی دی اف دانلود نمیشه فک کنم یکی دو نفر از بچه ها هم همین مشکل منو داشتن
نمیدونم چرا ارور میده Error 404 : صفحه مورد نظر یافت نشد …

سجاد دریس

سلام.
مشکل برطرف شد.

Sahar66

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

سجاد دریس

سلام.
توی اولین مطلب این سری کامل توضیح دادم که باید با فتوشاپ، html و css آشنایی داشته باشید.

Arman_Nr

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

سجاد دریس

سلام.
آره آرمان جان اندازه ها باید دقیق باشه، چونکه کدنویس بر اساس این اندازه ها، استایل ها و… میخواد کار کنه.

علی

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

سجاد دریس

سلام.
منظورم آیکون های شبکه های اجتماعی هست.

علی

سلام با تشکر از آموزشتون
سوالم اینه بهترین عرض برای بدنه اصلی وب سایت در طراحی فتوشاپ که بعدا به html تبدیلیش می کنیم چند پیکسله؟
من یه با برای طراحی قالب از عرض 1500پیکسل استفاده کردم و دیدم خیلی در اندازه عناصر در طراحی html بزرگه و دوباره عرض رو به 1200 کاهش دادم. لطفا راهنمایی نمایید؟

سجاد دریس

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

babakh

عالی

javad

سلام.
فونت هارو چطوری نصب کنم.

javad

ویندوزم xpاست.

حسین

سلام اول از همه تشکر میکنم بخاطر زحماتتان.یه سوالی داشتم ممنون میشم جواب بدین
بنده هر مستططیلی که درست میکنم و میخوام در وسط بین دو رولر قرار بدم ولی نمیشه و به یکی از خط کشها میچسبه!چطوری باید حساسیتش را تغییر بدم؟

کیوان علی محمدی

از منوی View گرینه Snap رو غیر فعال کنید.

gtanori

سلام اگر با فیلم آموزش دهید خیلی بهتر قابل درک است 💡

الی

سلام خسته نباشید
برای ایجاد کردن تکست و تایپ و رنگش ، من این تغییرات رو اعمال کردم،ولی چجوری باید ایجاد کنم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
ممن.ن میشم اگر زود جواب بدین

سجاد دریس

سلام
چه چیزی رو ایجاد کنید؟؟؟

الی

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

سجاد دریس

فقط کافیه یه جای تصویر کلیک کنبد!!

الی

قسمت 3 رو می گم،متنی که توی قسمت بالا گفتین که فونت و رنگش رو انتخاب می کنیم

دوست عزیز میشه واضحتر بگید مرسی

سجاد دریس

خب مشکلتون دقیقا چیه؟!!
نظری قبلی گفتین چطوری مستطیل رو ایجاد کنیم!!!

الی

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

eli homayoon

قسمت 3 که متن با صفحه سفید و اندازه 72 ایجاد کنیم، من روی type horizental tool میزنم،وتن/یماتم اعمال می کنم،ولی هیچ تغییری نمی بینم.
همون الی هستم فقط عضو سایت شدم

محمد علی

با سلام و خسته نباشید.
اولین باره که میام سایت شما و اولین باره که سایت به این خوبی از نظر آموزشی دیدم.
میخواستم بدونم بنده باید از کجا شروع کنم؟
کمی اچ تی ام ال کار و سی اس اس کار کردم اما کامل در حد مبتدی رو به متوسط؟
ممنون می شم به ایمیلم جوابم را بدید.
تشکر

سجاد دریس

سلام.
اول html رو شروع کنید، بعد css سپس javascript در آخر هم یکی از زبان های سمت سرور مثل php

blueeyes

سلام
میخوام بدونم این طراحی سایت با فتوشاپ رو یاد بگیریم میشه ازش در سایتی که میخوایم با ویژال استدیو و زبان asp.net بسازیم استفاده کنیم؟
لطفا زودتر جواب بدهید
ممنونم بخاطر سایت خیلی خوب و عالیتون

کیوان علی محمدی

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

ابوالفضل

سلام
مشکل من توی این متن هستش

(سپس استایل زیر رو بهش بدین)
اون عکسی که بهش استایل بدیم رو چه شکلی بیارم

سریع بگید
ممنون

ابوالفضل

منظورم ای لینک عکس هستش

http://www.7learn.com/wp-content/uploads/2013/06/f2-j1-p6.png

این رو چه شکلی بیارم

سجاد دریس

با دابل کلیک روی لایه مورد نظر این پنجره باز میشه.
یا که روی لایه کلیک راست کنید و گزینه ی دوم یعنی Blending Options رو انتخاب کنید

mehrdad

ببخشید من متوجه نشدم چطو اون استایل رو بهش دادین؟ به خصوص اون پنجره gradient generator را نفهمیدم از کجا اومد؟

سجاد دریس

اگه روی لایه ی هدر دایل کلیک کنید، پنجره ی layer style ظاهر میشه. که میتونید لایه استایل بدین.
وقتی روی تصویر گرادینت کلیک میکنید، پنجره ی gradient editor باز میشه.
این تصویر رو مشاهده کنید

mehrdad

پنجره gradient editor اصلاح می کنم

HE3AM

ببخشید فایل psd رو در چه ابعادی درست کنیم؟؟

سجاد دریس

سلام.
در فصل اول – جلسه دوم کامل توضیح داده شده

شیرو

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

سجاد دریس

سلام.
فایلها مشکلی ندارن.
دوباره دانلودشون کنید.

laya25

به مستطیل هدر استایل دادم! ولی الان رنگ هدرم اصلا آبی نمیشه در ضمن اون gradient editor رو چجوری بیارم ؟ اون تیک color overlay رو هم که شما زدین من میزنم هدرم قرمز میشه چیکار کنم؟کسی نیست جواب بده؟! ای بابا یکی جواب بده دیگه

سجاد دریس

سلام.
1.بر روی تصویر گرادینت کلیک کنید پنچره ی gradient editor باز میشه.
2.خب بد از زدن تیکش باید color رو تغییر بدین، روی مربعی که قرمزه (تو همون صفحه) کلیک کنید و رنگ رو تغییر بدید.

laya25

منظورتون از تصویر گرادینت کدومه؟
رنگ رو تغییر هم میدم بازم قرمزه فقط هاله ای از اون رنگی که تغییر میدم دور رنگ قرمز می افته
کلافه شدم

سجاد دریس

1. تو پنجره ی gradient overlay منظورم بود. اونجا یه تصویر گرادینتی هست روش کلیک کنید تا بتونید گرادینت رو تغییر بدین.
2. چک کنید بقیه گزینه های پنجره ی color overlay شبیه تصویری هست که توی پست قرار دادم…

laya25

پیدا کردم
رنگشم عوض کردم فقط اینکه تو اون تصویر گرادینت مشکیه آبی نشد
تو پنجره gradient editor هم مشکیه

سجاد دریس

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

laya25

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

سجاد دریس

از فتوشاپ cs3 به بالا استفاده کنید.
خواهش می کنم.

مهدیار

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

Hamideh Amani Azad

عکسهای شبکه های اجتماعی رو چطور در قسمت هدر وارد کنیم؟

سجاد دریس

با درگ کردن تصویر

محمد

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

hamraze

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

لقمان آوند

باید نسخه ی فتوشاپی رو استفاده کنید که با زبان فارسی سازگار باشه . نسخه ی فتوشاپ شمه چیه ؟

hamraze

فتوشاپ CS6 بود.ممنون از راهنمایی تون فتوشاپ رو عوض کردم مشکل برطرف شد

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.