بنر بالای مطالب

banner

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

انتخاب ترکیب رنگ وب سایت با استفاده از Adobe Kuler

6 انتخاب ترکیب رنگ وب سایت با استفاده از Adobe Kuler

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

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

template-global-solution-demo

با یکی دیگر از آموزشهای طراحی قالب با فتوشاپ در خدمت شما هستم . امروز میخواهم قالبی که نام آن را صلح جهانی گذاشته ام را در فتوشاپ طراحی کرده و در مرحله بعدی پوسته قالب را تبدیل به یک وب سایت استاتیک کنم .(دقت داشته باشید که تمام متن های تایپ شده فقط برای نمایش بهتر یک موقعیت بوده و از لحاظ مفهومی درست نمی باشد). شما می توانید رنگ ، فونت ، اندازه کادر را به دلخواه تغییر بدهید . هدف از انجام این آموزش نحوه طراحی پوسته قالب می باشد .
روش کار به این صورت هست که ابتدا یک صفحه با ابعاد 1440×1500 با رزولیشن 72 ایجاد میکنم و در مرحله بعدی با ابزار خط کش قسمت های مختلف قالب را اندازه گیری و یک خط جهت مشخص کردن قسمت مورد نظر قرار میدهم .
سپس با استفاده از ابزارهای مختلف شروع به کشیدن اجزایی که قرار است در قالب قرار بگیرد کرده و هر قسمت را با توجه به طرح اصلی طراحی میکنم .

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

home

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

طراحی قالب وب سایت خبری در فتوشاپ

 home

 

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

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

طراحی قالب وب سایت در فتوشاپ

home

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

بعد از طراحی دقیق قالب عکس ها و بافت پس زمینه در یک پوشه به اسم images ذخیره می شود تا از فایل Html به پوشه imageلینکی داده شود و از عکس ها همانند طراحی اصلی استفاده شود.

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

طراحی قالب سایت شماره 2 در فتوشاپ

head 02

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

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

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

بسیار خوب می خواهم طراحی شماره 2 را در محیط فتوشاپ شروع کنم .

طراحی قالب سایت شماره 5 در فتوشاپ

head

با یکی دیگر از طراحی های قالب سایت در خدمت شما هستم .

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

طراحی قالب سایت شماره 6 در فتوشاپ

home

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

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

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

طراحی قالب شماره 1 در فتوشاپ

PSD-to-HTML-tutorial-asarayan-14

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

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

آموزش طراحی وب سایت شیرین عسل در فتوشاپ

head

یکی از بخش های اصلی آموزش ، که خود من هم علاقه زیادی دارم تا برای این بخش آموزش درست کنم طراحی قالبهای وب سایت در محیط فتوشاپ و بعد تبدیل آن به یک وب سایت خوب و سبک با HTML و CSS می باشد .  اما به این نکته هم اشاره کنم که یکی از وقت گیر ترین قسمت ها همین بخش می باشد به طور مثال برای طراحی یک قالب و بعد از آن آماده کردن آموزش طرح مورد نظر 30 ساعت زمان به طور مفید صرف می شود که وقت زیادی هست و باید به بخش های دیگر هم توجه داشته باشم .
قرار بود 10 قالب را برای شما از صفر تا 100 طراحی کنم . سعی میکنم 4 قالب باقیمانده را طی مدت 2 هفته به صورت کامل برای شما آموزش بدم . یک آموزش ویژه هم برای شما در نظر گرفتم و آن هم آموزش آپلود کردن سایت طراحی شده  بر روی سرور به صورت کاملا تصویری می باشد که امیدوارم بازدید کنندگان از این بخش لذت ببرند .
اما 4 قالب باقیمانده را ، من چند قالب برای فروش طراحی کرده بودم که بدلایلی منصرف شده و حالا می خواهم این 4 قالب که به صورت حرفه ای طراحی شده و در همه مرورگرها هم بدون هیچ مشکلی جواب میده را برای شما به صورت کامل از صفر تا 100 طراحی کنم .

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

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

demo-head

 آموزش طراحی وب سایت شرکت رهیاب لپ تاپ
امروز می خواهم قالب سایت رهیاب لپ تاپ را در محیط فتوشاپ برای شما طراحی کنم .
در روزهای بعدی قالب طراحی شده در محیط فتوشاپ را تبدیل به یک وب سایت کامل با استفاده از HTML. CSS میکنم و سعی میکنم از صفر تا 100 طراحی یک قالب را به صورت کامل برای شما آموزش بدهم .
سعی کنید از آموزشهایی که در این بخش برای شما قرار میدهم نهایت استفاده را ببرید .
بدلیل اینکه هزینه طراحی قالب در محیط فتوشاپ و بعد تبدیل آن به HTML و CSS تقریبا 150 تا 200 هزار تومان می باشد پس قدر هر آموزش را بدانید و با کمی وقت سعی کنید تجربه خودتان را نسبت به طراحی پوسته های قالب کمی بیشتر کنید تا بتوانید قالبهای زیباتر و دارای کیفیت بهتری برای مشتریان خودتان طراحی کنید .

 

 

طراحی قالب وب سایت Transportation با فتوشاپ

Transportation-Template16

تا به حال 8 قالب وب سایت را از صفر تا 100 برای شما بازدید کننده محترم طراحی کرده ام . امروز نوبت میرسه به طراحی قالب نهم با نام Transportation که یک قالب زیبا و مناسب برای آژانس های مسافرتی می باشد .دقت داشته باشید که سطح آموزشهای طراحی قالب متوسط به پیشرفته می باشد ، به همین دلیل از اشاره به جزئیاتی که در سطح مقدماتی بوده خود داری کرده ام . 

آموزش طراحی وب سایت Halcyonic در فتوشاپ (بخش دوم )

Education-Website-Design-Halcyonic-2-demo

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

آموزش طراحی وب سایت Halcyonic در فتوشاپ (بخش دوم)

فایل PSD قالب را باز کرده وتا قسمت های اضافی را طراحی کنیم  .
بدنه سایت دارای ارتفاع 100 درصد می باشد یعنی بسته به اطلاعاتی که در این قسمت قرار میگرد ارتفاع کم یا زیاد می شود .
اما به صورت پیش فرض یک اندازه برای این قسمت در نظر می گیرم .
ابعاد این قسمت را به طور مثال 700 پیکسل در نظر میگرم .

1. برای تغییر رنگ پس زمینه ابتدا یک صفحه جدید با ابعاد 8×8 پیکسل ایجاد کنید  .

آموزش طراحی وب سایت Halcyonic در فتوشاپ

Education-Website-Design-Halcyonic-demo

با یکی دیگر از آموزشهای طراحی وب سایت در خدمت شما هستم .
در این بخش ابتدا باید قالب مورد نظر را بوسیله فتوشاپ طراحی کرده تا در مرحله بعدی بتوانم فایل PSD را تبدیل به یک وب سایت کنم .
نحوه کار به این صورت می باشد که ابتدا یک صفحه به ابعاد 2800×1400 با رزولیشن 72 ایجاد میکنم سپس موقعیت هایی که در صفحه می خواهم قرار بدهم را ابتدا بر روی کاغذ کشیده تا مطمئن بشم هر قسمت باید در کجا قرار بگیرد .
بعد از اینکه طرح اصلی را (فقط موقعیت ها) بر روی کاغذ ترسیم کردم باید بوسیله فتوشاپ ابعاد هر قسمت را مشخص و شروع به طراحی کنم .

عجله نکنید ، در ادامه به طور کامل با تصاویری که برای شما قرار میدهم ، متوجه توضیحات می شوید . (بخش اول )

 

عضو این خبرخوان RSS شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا