campaign-edianeh-98

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



visibility  
mode_comment   ۱۶۹

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

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

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

1-  برای شروع کار یک فایل جدید در ابعاد 960 پیکسل (عرض)  و 900 پیکسل (ارتفاع) و 72dpi رزولوشن ایجاد کنید.

2-  با سطل رنگ (Paint Bucket) رنگ (#04283b) را بر روی صفحه بریزید.

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

https://www.7learn.com/a/msm/webdesign/photoshop/1.jpg

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

https://www.7learn.com/a/msm/webdesign/photoshop/2.jpg

5-  حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#41738e) را برای کشیدن این اشکال انتخاب کردم.

https://www.7learn.com/a/msm/webdesign/photoshop/3.jpg

6-  در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#28607d) پر کردم.

https://www.7learn.com/a/msm/webdesign/photoshop/4.jpg

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

https://www.7learn.com/a/msm/webdesign/photoshop/5.jpg

8-  شما هم این کار را برای 4 گوشه کار به همین صورت تکرار کنید. حالا ما 2 نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

https://www.7learn.com/a/msm/webdesign/photoshop/6.jpg

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

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

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

https://www.7learn.com/a/msm/webdesign/photoshop/8.jpg

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

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

12-  و (Opacity) لایه را به 40% کاهش دهید.

https://www.7learn.com/a/msm/webdesign/photoshop/10.jpg

13-  مراحل 10 تا 12 را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

https://www.7learn.com/a/msm/webdesign/photoshop/11.jpg

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

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

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

https://www.7learn.com/a/msm/webdesign/photoshop/khat.jpg

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

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

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

https://www.7learn.com/a/msm/webdesign/photoshop/14.jpg

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

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

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

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

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

23-  حال اگر میزان شفافیت (Opacity) لایه را به 6% کاهش دهید نتیجه کار شماره 4 عکس زیر می شود.

https://www.7learn.com/a/msm/webdesign/photoshop/15.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

https://www.7learn.com/a/msm/webdesign/photoshop/demo.png

با تشکر از تمپ ها

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

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

king

سلام اگه میشه اسم فونتی که در هدر نوشته شده رو ممنون میشم
😳

محمدسینا معراجیان

سلام
فونت تیتر از سری ام جی mj هستش

محمدسینا معراجیان

درضمن در انتهای پست فایل پی اس دی قالب رو قرار دادم میتونید استفاده کمید!

hajian1

سلام
view sourceقالب وبلاگ خودم که مربوط به سایت تبیان است رابازمی کنم
وview sourceیک قالب رایگان آماده وبلاگ دیگرراکه ازسایتی تهیه کرده ام
لطفاًراهنمایی فرماییدچه تغیراتی به وبلاگ دوم بدهم که درسایت تبیان بتوانم ازآن استفاده کنم
باتشکر

لقمان آوند

سوالتون واضح نیست .

محمدسینا معراجیان

باید کدهای مخصوص تبیان را از خود سایت تبیان درخواست کنید

hajian1

سئوالم این است کهsourceقالب وب سایت با
وبلاگ چه تفاوت هایی باهم دارندواگرقالب وبلاگ بلاگفارابخواهیم برای قالب وبلاگ تبیان کدنویسی آنراتغیردهیم چگونه این کارعملی می شود؟
باتکر

محمدسینا معراجیان

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

ehsan123

سلام آقای معرا جیان htmlرو که خونده بودم .منظورم htmlبرای این قالب بود .مرسی.

sohayb

سلام خسته نباشد
خواهشا نحوه تبدیل کردن قالب رو ببه کد html رای سایت و سرویس های وبلاگدهی به خصوص بلاگفا رو بدید.منتظریم…
باتشکر
یاحق

-sina

سلام دوست عزیز.من یه مشکلی داشتم،در قسمت22 که گفتین اون کیلد ها را بزنم تا معکوس بشه،من انجام میدم ولی تغییری نمی کنه.لطفا راهنمایی کنید.

-sina

ممنون دیگه لازم مشکلم حل شد 😳

Hassan.Assadi

سلام
واقعا از اینکه اینگونه مطالب رو بدون هیچ انتظاری آموزش میدید متشکرم. مشتاقانه در انتنظار مطالب بعدی و ادامه دروس و استفاده ازCSS هستم.
با آرزوی موفقیت روز افزون

نام...

با سلام ببخشید برای این که در وبلاگ وقتی که موس بر روی یک لینک قرار میگیرد آن لینک تغییر کند(مثلا رنگ آن تغییر کند یا این که به سمت بالا،چپ و…برود ) باید از چه کدی استفاده کنیم؟

لقمان آوند

باید از مشخصه hover در css استفاده کنی . این صفحه در موردش توضیح داده و مثال زده .

نام...

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

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

لقمان آوند

از چنین کد css ی استفاده کن .

نام...

ممنون…ببخشید شما برای فارسی کردن فوتوشاپ فارسی ساز را پیشنهاد میکنید یا استفاده از فوتوشاپ me

لقمان آوند

سلام
در این مورد اطلاعات دقیق ندارم .

jaafar1363

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

..:: با پشتیبانی کامل از زبان شیرین پارسی خودمون.:) ::..

محمدسینا معراجیان

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

محمدسینا معراجیان

قطعا نسخه ی me توصیه میشه

jaafar1363

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

سید محمد حسین نقوی

سلام من محمد حسین ھستم می خوھم بھم کمک کنید تابتونم زبان برنامہ نویسی HTML رو یاد بگیرم ممنون خدا حافظ ۔ 😐 😐 😐 😐 😐

لقمان آوند

سلام
ایشالله که یاد می گیری . مطالب html رو بخون .

shiva

سلام مرسی از آموزشتون فتوشاپ تمام شد؟
برمیگردیم به اچ تی ام ال ؟
لطفا کدهای div ,span را هم توضیح بدین

محمدسینا معراجیان

تا اینجای کار بله
چشم

jaafar1363

لطفا در مورد ایجاد جدول با Div هم توضیح بدین.
ایجاد جدولهای تو در تو با Div.
مثلا در ایجاد جدول با Table مشخصه های Colspan و Rowspan داریم که میتونیم سلولهای جدول رو Merge یا Splite کرد.این مشخصه ها در Div به چه صورت است؟
با تشکر از خانم Shiva بابت تذکر این مورد.
ممنون

محمدسینا معراجیان

انشالله در اموزش css

میلاد حیدری

بهترین مثال با طراحی tableless کد زیر می باشد :

somayeh

salam . mrc az amoozeshatoon, man ketabi rajebe tarahi web khoondam va bazi az chizayi ke migido baladam baziam balad nistam. rastesh gij shodam nemidoonam che chizayi moonde ke bayad yad begiram ya chi balad nistam , khaheshan ye ketabe amoozeshe tarahi web behem moarefi konid ke aliiiiii bashe , akharesh bashe . ke age khastam tarahi web kar konam motmaen basham ke fool baladam .ketabi ke az sefr bashe ta akhar . lotf konid rahnamayim konid , age javabo be email am befrestid binahayat sepasgozaram.(shirine_ashegh@yahoo.com

لقمان آوند

سلام
برای یاد گرفتن طراحی وب باید چند زبون رو یاد بگیری . html ، جاوااسکریپت ، css ، php و …
برای کدومشون کتاب می خوای ؟

somayeh

salam,dar hameye in zamineha ke goftid behtarin va kameltarin ketabe amoozeshiro moarefi konid , chon mikham fool yad begiram , pishapish samimane tashakor mikonam .

لقمان آوند

سلام
من کتابهای فارسی رو نمی شناسم . لذا کتابهای زیر رو معرفی می کنم :
Learning Web Design 2nd Edition by Jennifer Niederst
HTML for the World Wide Web by Elizabeth Castro
Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

PHP Solutions: Dynamic Web Design Made Easy
Beginning PHP and MySQL: From Novice to Professional (Expert's Voice in Web Development) by W. Jason Gilmore
PHP Cookbook

احسان

سلام و عرض خسته نباشید خدمت شما!
یه سوال ازتون دارم اونم اینه که بعد از طراحی قالب مورد نظر در فتوشاپ اون رو چطوری به فایل html تبدیل کنم؟؟؟یا به قالب ورد پرس !
برای مثال:من این فایل psd رو دانلود میکنم و میخوام تو وردپرس یا بلاگ اسپوت استفاده کنم،چطوری باید تبدیلش کنم به کد؟؟؟
ممنون میشم اگه پاسخ بدین
باتشکر از سایت پر محتواتون

لقمان آوند

سلام دوست عزیز
لطفا سوالات رو در انجمن سایت بپرسید .

hajihasani

سلام ببخشید اگه ممکنه جلسات 2و 3و 4 رو هم اگه موجود هست لینکش رو روی سایت بذارین چون من فقظ جلسات 1 و 5 رو دیدم. با تشکر

محمدسینا معراجیان

http://www.7learn.com/tutorials/theme-design-tuts-part1-structure
http://www.7learn.com/tutorials/theme-design-tuts-part2-html-tags1
http://www.7learn.com/tutorials/theme-design-tuts-part3-html-tags2
http://www.7learn.com/tutorials/theme-design-tuts-part4-html-tags3
http://www.7learn.com/tutorials/theme-design-tuts-part5-photoshop
خدمت شما

Sohayb

باسلام
ببخشید این حرف رو میزنم ولی مجبورم:
بنده تمام نظرات این پستو خوندم همشون آموزش تبدیل این قالب در فتوشاپ به کد html یا هر کدی دیگر رو میخواستن که فک کنم یا شما ازش سر در نمیارید یا اینقدر ارزش واسه نظرات پستاتون قائل میشید یا
اینکه خــــــــــــــــــــــــــــــــــــــــیلی بی غیرت و تنبل هستید
ممنون.

محمدسینا معراجیان

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

Sohayb

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

لقمان آوند

جناب Sohayb
نحوه انتقاد شما اصلا درست نیست . به نظر شما بی خود و بی جهت به کسی بی غیرت گفتن توهین نیست ؟ اصلا مفهوم بی غیرت بودنو میدونی شما ؟ می دونی به کی میگن بی غیرت ؟
اگر به پست ندادن معترض هستید بگید . دیگه چه معنی داره که اینطور بد و بیراه بگید !
سون لرن در چند سالی که فعالیت داشته همواره هدف اصلیش پاسخگویی به سوالات کاربرا بوده . اون هم بدون مزد و منت . شما برید توی سایت های ایرانی بگردید ، کدوم یکی هست که به این شکل تک تک سوالات بازدید کننده ها رو پاسخ بده ؟ امسال بچه های تیم سون لرن مشغول هستند ، من خودم که درگیر پایان نامه ام هستم ، سینا برا کنکور میخونه ، سجاد هم مشکلاتی براش پیش اومده . ولی در عین حال روزانه بیش از 10 سوال زمانگیر کاربرها در سایت رو پاسخ میدیم . بعضی وقتا 1 ساعت وقت گذاشتم و گشتم تا جواب سوال خاصی رو بدم … بقیه ی بچه های سون لرن هم همینطور .
در مورد نحوه ارسال مطلب در سون لرن هم بگم که طبق برنامه است . دوستان گفتن آموزش ویدیویی ، گذاشتیم . گفتن html ، گذاشتیم . گفتن css و php گذاشتیم . همه رو هم مجموعه ای و سری وار گذاشتیم . که کلی هم زمان برده از ما . آموزش تبدیل psd به وب نیاز به چند مورد پیشنیاز داره و باید در چند قسمت آموزش داده بشه . در برنامه ی اینده ی ما هست . ولی فعلا کسانی که آموزش های دیگه رو خواستند بیشترند و ارسال مطالب بر اساس اولویت بندی انجام میشه .
پس اگر صبر کنید ، به مقصودتون خواهید رسید .
ضمنا منابع آموزشی در این مورد زیاد هستند . کافیه توی گوگل با کیورد های psd to html tutorial و امثال این سرچ کنید .
براتون ارزوی توفیق دارم و بهتون پیشنهاد می کنم که قبل از اظهار نظر و انتقاد در مورد اون چیزی که می گید و می نویسید کمی تامل کنید !

salamat595

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

لقمان آوند

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

salamat595

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

لقمان آوند

ان شاءالله در آینده چنین اموزشی خواهیم داشت .

nedi

سلام به دوستان سون لرنی،
دست همتون درد نکنه.
برای تبدیل فایلهای PSD به HTML می تونید از این کتاب استفاده کنید:
خودآموز طراحی وب به صورت عملی
نویسنده: حامد تکمیل

http://veyq.ir/book/id/13218/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%DA%A9%D8%AA%D8%A7%D8%A8-%D8%AE%D9%88%D8%AF%D8%A2%D9%85%D9%88%D8%B2-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-%D8%B9%D9%85%D9%84%DB%8C

برنامه نویس

ممنون اموزش جالبی بود

سینا خرسند

سلام ممنون از بابت آموزش طراحی قالب سه بعدی تون واقعا به من کمک کردین.
فقط من یک مشکل دارم چجوری این قالب سه بعدی مو sliceکنم
طوری کهheaderو…ازهم جدا باشند
ممنون میشم راهنمایی هاتونو برام ایمیل کنین

ممنون ازسایت جامع تون

babak khorsand

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

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

1 2