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

نویسنده: حامد میرزایی 18. جوان 2011 16:30

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

GD Auto Service: Learn How to Create an Awesome Landing Page in Photoshop

نتیجه نهایی پروژه:

دانلود pdf آموزش طراحی سایت دانلود سورس کامل

 

● پسورد : www.websiteha.com

قدم 1 : ایجاد فایل و انجام تنظیمات

فتوشاپ را باز کرده و یک سند با سایز 1400px در 1850px ایجاد نمایید.

ابزار خط کش (Rule Tool) در این آموزش بسیار کاربردی است. بنابراین مطمئن شوید که خط کش (Ruler) و خطوط راهنما (Guide) فعال باشند :

  • Ruler : Ctrl + R
  • Guide : Ctrl + ;

یک چیز مهم در استفاده از ابزار خط کش، پنل Info است. چراکه هنگام اندازه گیری ها، اطلاعات مورد نیاز در این پنل نشان داده میشود. معمولا این پنل در سمت راست کنار پنل ها نشان داده می شود اما اگر این پنل اکنون وجود ندارد، میتوانید از منوی Windows بخش Info را نمایش دهید.

سایز کلی وب سایت شما 960px خواهد بود. بنابراین اولین خط راهنما (Guide) را با رفتن به منوی view و کلیک روی گزینه New Guide و مقدار 220px رسم میکنیم. دومین خط راهنما را نیز از همین طریق با مقدار 1180px رسم می کنیم. با رسم این دو خط راهنما در وسط وصفحه 960px فضا برای پیاده سازی وب سایت خواهیم داشت.

قدم 2: ساخت سرآیند یا هدر سایت

یک مستطیل توسط ابزار رسم مستطیل (Rectangle Tool) به عرض 100% و ارتفاع 200px رسم نمایید. سپس با دوبار کلیک روی آن لایه پنجره استایل مربوط به آن را باز کرده و تغییرات استایلی زیر را بر روی این لایه اعمال نمایید:

  • Drop Shadow

  • Gradient Overlay

  • Stroke

نتیجه

یک مستطیل دیگر در بالاترین نقطه فضای ترسیم سایت به عرض 100% و ارتفاع 40px رسم نمایید. به مستطیل رسم شده استایل زیر را اعمال نمایید:

  • Drop Shadow

نتیجه

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

قدم 3: ساخت لوگوی سایت

اکنون می خواهیم لوگوی سایت را طراحی کنیم. برای شروع توسط ابزار رسم بیضی (Ellipse Tool) یک دایره 80px * 80px رسم نمایید. برای رسم دایره توسط ابزار رسم بیضی کافیست هنگام رسم کلید shift را پایین نگاه دارید. سپس به دایره رسم شده استایل زیر را اعمال نمایید:

  • Drop Shadow

  • Gradient Overlay

نتیجه

اکنون کلید Ctrl را پایین نگاه داشته و روی تصویر کوچک (thumbnail) در کنار این لایه در پانل لایه ها کلیک نمایید. به منوی Select رفته و در زیرمنوی Modify گزینه Contract را انتخاب و مقدار 5px را برای آن وارد نمایید. سپس در بالای این لایه یک لایه جدید ایجاد کرده و آن را با یک رنگ دلخواه پر کنید. به لایه جدید استایل زیر را اعمال نمایید:

  • Inner Shadow

  • Gradient Overlay

  • Stroke

نتیجه

اکنون ابزار نوشتن متن را انتخاب کرده و حروف GD را تایپ نمایید. در این پروژه از فونت Myraid در حالت Bold با سایز 36pt استفاده شده است. سپس استایل زیر را به متن اضافه نمایید:

  • Drop Shadow

  • Gradient Overlay

اکنون نتیجه باید به صورت زیر باشد:

اکنون بیایید کمی حالت درخشندگی به لوگو اضافه کنیم. یک لایه بالای لایه متن ایجاد کنید و نام آنرا highlights بگذارید. در حالی که این لایه در پانل لایه ها در حالت انتخاب است، کلید کنترل را پایین نگه داشته و روی لایه دایره داخل لوگو در پانل لایه ها کلیک کنید تا اطراف آن به حالت انتخاب درآید. سپس ابزار Elliptical Marquee Tool را انتخاب کرده و در حال که کلید Alt را پایین نگه داشته اید یک بیضی مانند شکل زیر رسم نمایید. به یاد داشته باشید مادامی که کلید Alt را پایین نگه داشته اید ناحیه ای گه در حال انتخاب به صورت نقطه چین درآمده مخفی خواهد شد.

سپس ابزار گرداینت خطی (Linear Gradient) را انتخاب کنید و ناحیه انتخاب شده را با گرادینتی با پیش زمینه سفید تا شفاف پر کنید.

اکنون عبارت Auto Service را نوشته و استایلی را که بر روی حروف GD اعمال کرده بودید، برای این لایه نیز کپی کنید. نتیجه نهایی لوگو باید مشابه تصویر زیر باشد:

قدم 4: ساخت منوی سایت

با استفاده از ابزار رسم خط (Line Tool) یک خط به ضخامت 1px و رنگ #000000 رسم نمایید. خط دیگری با فاصله 45px پایین همین خط به ضخامت 1px و رنگ #444343 رسم نمایید. تمامی اجزای منو در بین این دو خط ترسیم خواهند شد.

توسط ابزار متن کلمات لینک های منو را تایپ کنید. هر لینک باید از سمت راست 45px با لینک دیگر فاصله داشته باشد. سپس در بین هر دو لینک یک خط عمودی به ضخامت 1px به وسیله ابزار رسم خط، ترسیم نمایید.

اکنون می خواهیم به این لایه ها استایل های لازم را اعمال کنیم. قصد داریم لینک Home را به صورت لینک فعال نشان دهیم. برای اینکار توسط ابزار انتخاب مستطیلی (Rectangular Marquee Tool ) مانند شکل زیر مستطیل لینک Home را انتخاب نمایید. توسط ابزار گرادینت خطی، یک گرادینت با رنگ سفید-شفاف برای این انتخاب ایجاد نمایید. سپس در بالای پنل لایه ها، Layer Mode را برابر با Screen و میزان Opacity را 30% قرار دهید.

نتیجه کار را در تصویر زیر مشاهده میکیند:

قدم 5: ساخت بخش جستجو

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

برای ایجاد بخش شیب دار در بین دو شکل، از امکان Free Transform (Ctrl+t) استفاده میکنیم. در حالی که یکی از مستطیل ها در پانل لایه ها در حالت انتخاب است، دکمه های Ctrl+t را فشار دهید و سپس روی مستطیل انتخاب شده راست کلیک نموده و گزینه Distord را انتخاب کنید. سپس گوشه مورد نظر را گرفته و شیب لازم را بر روی آن اعمال کنید و در پایان دکمه Enter را بزنید. همین کار را برای اعمال شیب روی شکل مجاور تکرار نمایید.

استایل زیر را بر روی فیلد ورود متن اعمال کنید:

  • Inner Shadow

  • Gradient Overlay

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

  • Inner Shadow

  • Gradient Overlay

با استفاده از ابزار نوشتن متن کلمات مربوطه را به این بخش اضافه نمایید:

قدم 6: ساخت گالری تصاویر

ابزار ترسیم مستطیل گوشه گرد (Rounded Rectangle Tool) را انتخاب نمایید و شعاع (Radius) را برابر با 10px قرار دهید. یک مستطیل 600px در 340px رسم نمایید و نام آنرا base بگذارید. یک مستطیل دیگر 600px در 50px در بالای این لایه ایجاد کنید و نام آنرا Control base بگذارید.

روی لایه control base راست کلیک کنید و گزینه Rasterize را انتخاب نمایید. با استفاده از ابزار انتخاب مستطیل شکل ناحیه ای را که در تصویر زیر نشان داده شده است را انتخاب کرده و کلید delete را فشار دهید.

استایل های زیر را اعمال کنید:

  • Gradient Overlay

  • Stroke

نتیجه

اکنون میخواهیم دکمه های "قبل" و "بعد" را ایجاد کنیم. ابزار رسم اشکال (Shape Tool) را انتخاب کرده و فلش هایی که مانند تصویر زیر هستند بیابید.

استایل زیر را بر روی آنها اعمال نمایید:

  • Drop Shadow

  • Gradient Overlay برای فلشی که می خواهیم در حالت فعال نشان داده شود.

نتیجه

سه دایره با استفاده از ابزار رسم دایره (Ellipse Tool) رسم کرده و آنها را در محلی که در تصویر زیر نشان داده شده قرار دهید:

استایل زیر را بر روی اولین دایره اعمال کنید:

  • Drop Shadow

  • Gradient Overlay برای اینکه در حالت انتخاب استایل خاصی داشته باشد:

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

  • Drop Shadow

  • Inner Shadow

  • Gradient Overlay

نتیجه

با استفاده از ابزار رسم مستطیل 3 شکل مانند تصویر زیر ایجاد نمایید و آنها را به ترتیب first ، second و third نامگذاری کنید. سپس میزان شفافیت (Opacity) را برابر 90% قرار دهید:

استایل زیر را بر روی لایه های first ، second و third اعمال نمایید:

  • Gradient Overlay

نتیجه

اکنون هرکدام از این لایه ها را با یک متن دلخواه پر کنید و یک دکمه "Read more" نیز به آنها اضافه نمایید. به شکل زیر توجه نمایید:

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

نتیجه

قدم 7: ساخت پنل لاگین

ابزار ترسیم مستطیل گوشه گرد (Rounded Rectangle Tool) را انتخاب نمایید و شعاع (Radius) را برابر با 10px قرار دهید. یک مستطیل 340px در 170px رسم نمایید:

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

  • Inner Shadow

  • Gradient Overlay

  • Stroke

دقت کنید که بخش لاگین و بخش جستجو مشابه یکدیگر هستند. با این تفاوت که باید برای لاگین استایل Inner Shadow در فیلد ورود متن را حذف کنید. همچنین برای استایل Stroke در دکمه Login، رنگ باید برابر با #a5150 باشد.

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

استایل زیر را بر روی آن اعمال نمایید:

  • Gradient Overlay

  • Stroke

با استفاده از ابزار مداد (pen Tool) شی رسم شده را مانند شکل زیر کامل کنید:

نوشته های زیر را به این پانل لاگین اضافه نمایید:

قدم 8: ساخت جعبه انتصاب

با استفاده از ابزار رسم مستطیل گوشه گرد یک مستطیل با شعاع (Radius) برابر با 10px با ابعاد 340px در 140px رسم نمایید. این مستطیل از بالا و سمت چپ 20px فاصله دارد.

استایل زیر را روی این مستطیل اعمال کنید:

  • Gradient Overlay

  • Stroke

نتیجه

برای ساخت دکمه For Free کافیست لایه های مربوط به دکمه لاگین و فلشی که در گالری تصاویر استفاده کردیم را همانند تصویر زیر کپی کرده و مجددا در اینجا نیز استفاده کنیم:

عبارت For Free را با فونت Myraid Pro و سایز 14pt بر روی دکمه بنویسید.

استایل زیر را اعمال نمایید :

  • Inner Shadow

  • Gradient Overlay

  • Stroke

نتیجه

یک متن دلخواه توسط ابزار نوشتن متن با فونت Myraid Pro به سایز 24pt با حالت Bold و Italic مانند تصویر زیر بنویسید:

استایل زیر را بروی آن اعمال نمایید:

  • Drop Shadow

  • Gradient Overlay

نتیجه

در پایان از تصویری بنام rims را که در بسته دانلودی موجود است را در فتوشاپ باز کرده و مانند شکل زیر به این بخش اضافه کنید:

قدم 9: ساخت بخش خدمات

با استفاده از ابزار رسم مستطیل گوشه گرد یک مستطیل با ابعاد 960px در 205px رسم نمایید.

استایل زیر را اعمال نمایید:

  • Inner Shadow

  • Gradient Overlay

  • Stroke

نتیجه

اکنون باید دکمه های "قبل" و "بعد" را اضافه نماییم. برای اینکار با استفاده از ابزار رسم مستطیل و ابزار مداد اشکال لازم را مانند شکل زیر ایجاد نمایید:

استایل لایه ای که نام آن را base گذاشتیم کپی کرده و برای این لایه نیز بکار بگیرید.

اکنون زمینه بخش خدمات ساخته شد. یک مستطیل گوشه گرد با ابعاد 280px در 160px به رنگ #141414 ایجاد نمایید.آن را در مکانی که در شکل زیر مشاهده میکنید قرار دهید. سپس از منوی select بخش modify مقدار Contract را برابر با 5px قرار دهید.

استایل زیر را روی این لایه اعمال نمایید:

  • Drop Shadow

نتیجه

یک شکل مانند آنچه در تصویر زیر مشاهده میکنید ایجاد کنید. رنگ زمینه این شکل را سیاه و میزان شفافیت آن برابر با 80% قرار دهید. توسط ابزار متن نوشته ای مانند شکل زیر بنویسید و دکمه "read more" که در بخش گالری تصاویر ایجاد کردیم را به این بخش نیز اضافه کنید.

اکنون تمامی لایه های را که در این بخش برای ساخت service1 ایجاد کردیم در یک گروه قرار دهید و از گروه ایجاد شده 2 بار کپی بگیرید و در این بخش قرار دهید و با تغییرات لازم به شکل زیر دست یابید:

نتیجه

قدم 10: ساخت آخرین آخبار / بلاگ

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

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

قدم 11: ساخت بخش مشتریان

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

قدم 12: ساخت بخش فوتر سایت

با استفاده از ابزار رسم مستطیل گوشه گرد، بخش های فوتر که در تصویر زیر مشخصات آنها درج شده است را رسم نمایید:

قدم 13: ساخت پس زمینه سایت

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

به منوی Filter رفته و در زیر منوی Blur گزینه Gaussian را انتخاب نمایید و مقدار زیر را اعمال نمایید:

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

نظرات (71) -

محمد
محمد Iran
09/12/2011 11:01:47 ب.ظ | لینک نظر |

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

Admin
Admin Iran
09/13/2011 04:41:15 ق.ظ | لینک نظر |

درود

این نظر لطف شماست محمد جان و بسیار سپاسگذارم از پیشنهادتون و اینکه آموزش رو مطالعه کردید. پیرو درخواست شما باید عرض کنم در آینده نزدیک آموزش هایی برای تبدیل طرح PSD به X/HTML  در نظر دارم و در این آموزش ها همونطور که شما خواستید قالب هایی رو برای نمونه طراحی می کنیم که بعد از اون میتونید با بررسی سیستم مدیرت محتوای مورد نظرتون، قالب رو پیاده سازی کنید. بدون شک آموزش طراحی قالب بر روی CMS های محبوب مانند وردپرس، جوملا، دات نت نیوک، دروپال و ... انجام خواهد شد.

سپاس

حمید
حمید Iran
12/22/2011 06:29:26 ب.ظ | لینک نظر |

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

محمد
محمد Iran
09/13/2011 06:17:59 ق.ظ | لینک نظر |

با تشکر از توجه شما به بازدیدکنندگانتون
در صورت امکان موارد جدید رو از طریق ایمیل اعلام نمائید

Admin
Admin Iran
09/13/2011 07:00:04 ق.ظ | لینک نظر |

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

محمد
محمد Iran
09/24/2011 06:27:45 ق.ظ | لینک نظر |

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

با سپاس فراوان

ندا
ندا Iran
11/03/2011 03:52:36 ب.ظ | لینک نظر |

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

شادمهر
شادمهر Iran
11/14/2011 10:40:33 ق.ظ | لینک نظر |

مرسی مهندس.

حامد میرزایی
حامد میرزایی Iran
11/14/2011 10:52:02 ق.ظ | لینک نظر |

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

alireza feiz
alireza feiz United States
11/17/2011 07:54:06 ب.ظ | لینک نظر |

mer30 . az rahnemaei shoma motashakeram

محسن
محسن United States
11/21/2011 01:38:40 ب.ظ | لینک نظر |

سلام.

عالی بود.

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

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

این اموزش تقرریبا جزئیات رو توضیح داده و خیلی به دردم میخوره.

اگر ممکنه آموزش تبدیل همین طح به اچ-تی-ام-ال / سی-اس-اس رو هم بذارید که دیگه تکمیل بشه.

Admin
Admin Iran
11/21/2011 01:56:07 ب.ظ | لینک نظر |

سلام

از همه شما تشکر میکنم، از اینکه مطالب رو دنبال میکنید و آشنایی با شما خوشحالم. شاید مطلع باشید که نوشتن اینگونه مطالب بسیار پر زحمت و زمانبر هست و من هم دوست ندارم مثل وبسایت های زردی که این روزها مثل قارچ تو اینترنت ایجاد میشن، فضای وب رو با مطالب بی مغز پر کنم. حتما آموزشی جامع و کاربردی برای تبدیل طرح فتوشاپ به X/HTML خواهم نوشت و شما میتونید از انتشار مطالب توسط خبرنامه مطلع بشید.
باز هم از شما ممنونم...

ندا
ندا Iran
12/08/2011 10:24:54 ب.ظ | لینک نظر |

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

وحید
وحید Iran
01/02/2012 09:14:21 ب.ظ | لینک نظر |

با اجازه مدیر(امیدوارم فضولی نباشه)
دوست عزیز شما برای سهولت کار میبایست ابتدا با مبانی فتوشاپ آشنا باشید
ولی جهت رفع مشکل شما به توضیحات توجه کنید.
برای رسم اشیا در فتوشاپ دکمه u کیبر را فشار بده
الان میتونی شکل رسم کنی
به صورت پیش فرض مربع هست
برای تغییر شکل به قسمت زیر منوی بالا صغحه توجه کن
شکلهای مربع / مربع لیه گر / دایره / چند ضلعی / خط و یه آیکون می بینی که برای سایر اشیا هست
بعد از اینکه u را زدی و مربع را انتخاب کردی برای تعیین ارتفاع کنار "آیکونی که برای سایر اشیا" هست یه فلش روبه پایین هست
روی اون کلیک کن
یه قسمت هست به نام fixed size اونو انتخاب کن و در قسمت h: ارتفاع مورد نظرتو وارد کن
الان شکلی که می کشی یه مستطیل هست با ارتفاع ثابت " همون عددی که وارد کردی" با طول متغییر

قائم دلشادی
قائم دلشادی Iran
12/11/2011 10:17:30 ب.ظ | لینک نظر |

سلام
بی نهایت عالیه
نمیدونم چی بگم واقعا ، من که فکم افتاد

ali
ali Iran
12/26/2011 10:36:06 ب.ظ | لینک نظر |

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

navid
navid Iran
01/10/2012 07:14:02 ب.ظ | لینک نظر |

با تشكر از توضيح زيباتون.
من كه مدت هاست دنبال چنين آموزشي مي گشتم ب هدفم رسيدم ولي به نظرتون براي برنامه نويسيش چكار كنم ؟

Admin
Admin Iran
01/30/2012 11:15:41 ق.ظ | لینک نظر |

سلام آقا نوید، برای برنامه نویسیش بعد از یادگیری html و css  متونید یا خودتون از ابتدا این رو به صورت یک سایت دربیارید و یا اینکه به صورت قالب برای یک cms پیاده سازی کنید.

ziba
ziba Egypt
01/14/2012 01:39:20 ب.ظ | لینک نظر |

ali bood

mikhastam beporsam mishe ino tabdil be kode ghaleb baraye weblog kard ??

Admin
Admin Iran
01/30/2012 11:16:58 ق.ظ | لینک نظر |

سلام

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

farzad
farzad Iran
01/18/2012 04:08:02 ب.ظ | لینک نظر |

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

Admin
Admin Iran
01/20/2012 10:53:50 ب.ظ | لینک نظر |

سلام فرزاد جان
ببینید طراحی روی کاغذ اولین قدم طراحی سایت هست. بعد پیاده سازی در فتوشاپ و بعد هم تکه تکه کردن این تصویر و کدنویسی توسط CSS و HTML. پس شما بعد از یادگیری طراحی سایت در فتوشاپ یا هر برنامه ویرایش و ساخت تصاویر، باید CSS و HTML رو یاد بگیرید تا بتونید این رو تبدیل به سایت کنید.
نرم افزار خاصی برای ساخت وبسایت نیاز نیست و شما میتونید از همین notepad ویندوز شروع به نوشتن کدهای CSS و HTML کنید. اما خب نرم افزارهایی مثل dreamweaver محیطی فراهم میکنن که خیلی از موارد مورد نیاز در اختیاراون هست و میتونید برای راحتی ازش استفاده کنید.

نگار
نگار United States
01/27/2012 10:15:02 ب.ظ | لینک نظر |

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

Admin
Admin Iran
01/30/2012 11:21:08 ق.ظ | لینک نظر |

سلام نگار جان

ببینید کل اینترنت پیش روی شماست و با یه سرچ ساده جواب هرسئوالی رو میتونید پیدا کنید، شما با کلاس رفتن یه دانش پایه رو کسب کردید و مراجع هم همون دانش پایه رو یاد میدن. شما الان یه مرحله یا level بالاتر هستید و اونچه که نیاز دارید رو باید گسسته از سایت های مختلف بگردید و پیدا کنید و با تمرین اونچه که یاد گرفتید در لایه بندی صفحات وب خبره بشید. من معمولا برای شروع به عنوان مرجع w3schools.com رو معرفی میکنم اما همونطور که فرمودید شما مبتدی نیستید.

فرشید
فرشید United States
01/30/2012 01:01:05 ق.ظ | لینک نظر |

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

Admin
Admin Iran
01/30/2012 11:40:02 ق.ظ | لینک نظر |

سلام فرشید جان، مرسی از نظر و انتقاد سازندتون.
در مورد چند هفته اخیر حق با شماست و من کمتر میرسم به نظرات پاسخ بدم و این در مورد پستهای قدیمی من بیشتر صادقه و نظرات در پست های جدید رو اگر مشاهده بفرمائید تک تک جواب دادم و راهنمایی کردم. کلا سعی میکنم پاسخ نظری از قلم نیافته اما متاسفانه در مورد چند هفته اخیر کم کاری که فرمودید رو کاملا قبول دارم و حتما سعی میکنم جبران کنم.
اما در مورد سئوالتون باید بگم :
برای طراح سایت شما ابتدا ساختار سایت و  طرحتون رو تو یه کاغذ خیلی ساده رسم می کنید.
بعد ظاهر اصلی سایت رو با یه نرم افزار گرافیکی مثل فتوشاپ در میارید. مثل همین آموزش.
بعد شما با داشتن دانش کافی در زمینه CSS (یک زبان برای حالت دادن، چیدمان، رنگ بندی و کلا طراحی ظاهری صفحه وب) و همچنین html (یک زبان پایه برای ایجاد عناصری مثل دکمه، تکست باکس، لینک و ... در صفحه وب) اقدام به تکه تکه کردن این طرح فتوشاپی و بردن اون تو صفحه وب میکنید.

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

پ ن 1: برای پیاده سازی طرح فتوشاپی به صفحات وب، برای شروع من نرم افزار dreamweaver رو پیشنهاد مکنم که همه امکانات داخلش فراهم شده.

پ ن 2: برای یادگیری css و html بهترین منبع وبسایت w3schools.com هست که می تونید آنلاین کدهارو همراه با آموزش تست کنید و تغییر بدید.

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

آناهیل
آناهیل Iran
02/10/2012 07:23:36 ب.ظ | لینک نظر |

سلام طراحی خیلی جالبی بود دقیقا مثل همون ایده هایی بود که من توذهنم دارم.به نظر شما طراحی یک سایت با فلش ودر پشت اون کدنویسی asp.net کارخوبیه؟یابهتره همون روش سنتی طراحی یک صفحه بی روح ادامه بدم.

Admin
Admin Iran
02/10/2012 08:12:17 ب.ظ | لینک نظر |

سلام دوست عزیز
طراحی سایت با فلش به هیچ عنوان پیشنهاد نمیشه و در ضمن به عنوان یک روش مدرن در مقابل لغت "سنتی" قرار نمیگیره. مدت هاست وبسایتهای فلش منسوخ شده و اگر لطف اپل و مایکروسافت در تجدید نظرشون در مورد پشتیبانی از فلش نبود، الان همه وسایتهای فلش جمع شده بودن. ظهور html5 و css3 و jquery فلش رو از صحنه خارج کرد.
الان با استفاده از مواردی که گفتم صفحات وبی ساخته میشه که واقعا تحسین برانگیزه و فوق العادع عجیب و جذاب هست.
پس به نظر من طراحی بی روح خودتون رو با این تکنولوژی ها، جان تازه ببخشید!

غریبه
غریبه Iran
02/13/2012 12:47:39 ب.ظ | لینک نظر |

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

hamed
hamed Iran
02/15/2012 08:00:47 ب.ظ | لینک نظر |

(ممنوی) همین شماهستید که کشور آباد می کنید خدا خیرت بده

Admin
Admin Iran
02/16/2012 11:31:31 ب.ظ | لینک نظر |

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

معصومه
معصومه Iran
04/09/2012 01:29:33 ب.ظ | لینک نظر |

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

bikas
bikas Iran
04/11/2012 06:27:36 ب.ظ | لینک نظر |

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

foad
foad Iran
05/02/2012 11:46:32 ب.ظ | لینک نظر |

با سلام .
ممنون از شما . من یه مشکلی داشتم .. در قسمت gradient overly اون قسمت کالر لوکیشن وجود نداره .! اگه امکاشن هست توضیح بدید ممنو میشم .
از فتوشاپ cs4 استفاده میکنم .


ممنون .

شاهین
شاهین Iran
05/15/2012 11:04:52 ق.ظ | لینک نظر |

سلام

و واقعا ممنون و متشکر از زحماتتون


خدا حافظتون

حسام
حسام Iran
05/20/2012 10:40:01 ق.ظ | لینک نظر |

مهندس مثل شما کم ‍یدا میشه واقعا معرکه ای فوق العاده بود

kay arash
kay arash Iran
06/16/2012 04:23:47 ب.ظ | لینک نظر |

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

پیروز باشید.
دوست گرامی

یاسر
یاسر Iran
06/17/2012 01:28:45 ب.ظ | لینک نظر |

واقعا عالی .....
اولین سایتی که واقعا به دلم نشست

اگه آموزش تبدیل به x/html و تبدیل به جوملا رو بگذارید واقعا شاهکار بزرگی میکنید

در اینترنت چنین آموزشهایی هست اما متاسفانه همشون ناقص هستند یا تجاری هستند
من منتظر آموزش تبدیل اول به CMS هستم
بازهم سپاس..

فرید
فرید Iran
07/15/2012 12:22:48 ب.ظ | لینک نظر |

با سلام
بدون اغراق عرض میکنم واقعا عالی توضیح دادید.
خیلی بهره بردم

saba
saba United States
08/05/2012 12:15:51 ب.ظ | لینک نظر |

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


الهه
الهه Iran
08/31/2012 11:18:18 ب.ظ | لینک نظر |

سلام، دست گلتون درد نکنه، عالی بود، خیلی کمکم کردین

baran
baran Iran
09/05/2012 01:54:58 ب.ظ | لینک نظر |

خوب بودممنون

marzie
marzie Iran
09/24/2012 05:52:19 ب.ظ | لینک نظر |

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

محمود
محمود Iran
10/29/2012 09:22:23 ب.ظ | لینک نظر |

سلام دستتون درد نکنه برا همه ی مطالب سایت.واقعاً عالیه.برا تازه کارا بیشتر مطلب بذارید

amir
amir Iran
11/12/2012 06:41:05 ب.ظ | لینک نظر |

mer3000000000000000000000000000000000000000000000000000000000000000000

سعید
سعید Iran
11/14/2012 01:06:44 ب.ظ | لینک نظر |

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

اندیشه
اندیشه United States
01/06/2013 10:23:15 ق.ظ | لینک نظر |

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

الناز
الناز Iran
02/26/2013 01:09:16 ب.ظ | لینک نظر |

ممنووونم خیلی عالی توضیح دادین.سپاس فراوان

aslam
aslam Iran
02/27/2013 01:39:49 ب.ظ | لینک نظر |

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

maryam
maryam Iran
03/10/2013 04:00:53 ب.ظ | لینک نظر |

خیلییییییییییییییییییییییییییییییییییییییییییییی ممنوووووووووووووووون واقعا متشکرم

mk
mk United States
03/27/2013 12:39:11 ب.ظ | لینک نظر |

سلام
آموزش بسیار جالبیه

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

سایز استاندارد برای شروع آیا همون سایزی ک شما فرمودین هست؟چون جاهای دیگه سایز های دیگه هم دادن!



b
b Iran
03/28/2013 01:02:23 ب.ظ | لینک نظر |

سلام.
سایتتون خیلی مفید است...
واقعا ممنون

محمّد مهدی نادری
محمّد مهدی نادری Iran
04/11/2013 11:24:43 ق.ظ | لینک نظر |

سلام، واقعاً مطلب خوبیه.
دستتون درد نکنه.

محمّد مهدی نادری
محمّد مهدی نادری Iran
04/11/2013 11:25:54 ق.ظ | لینک نظر |

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

elena
elena Iran
05/09/2013 01:14:17 ب.ظ | لینک نظر |

خیلی عالی بود...
جامع و کامل

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

محمدحسین
محمدحسین Iran
06/20/2013 01:43:25 ب.ظ | لینک نظر |

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

الینا
الینا United States
06/26/2013 11:07:12 ق.ظ | لینک نظر |

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

Admin
Admin Iran
08/06/2013 06:35:11 ب.ظ | لینک نظر |

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

saied
saied Iran
06/30/2013 03:44:28 ب.ظ | لینک نظر |

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

Admin
Admin Iran
08/06/2013 06:32:43 ب.ظ | لینک نظر |

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

E.Salehi
E.Salehi Iran
07/04/2013 08:16:53 ب.ظ | لینک نظر |

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

هنگامه
هنگامه Iran
07/27/2013 01:20:26 ب.ظ | لینک نظر |

خیلی خوب بود ، بازم از این مطالب بذارید
مرسی

طراحی وب سایت
طراحی وب سایت Iran
07/28/2013 02:23:01 ق.ظ | لینک نظر |

آقا واقعا ممنون
خیلی دنبالش بودم!!!!!!!!!!!!!

جواد
جواد Iran
08/06/2013 01:07:36 ب.ظ | لینک نظر |

گرادینت خطی کجاست خواهشن توضیح دهید

Admin
Admin Iran
08/06/2013 06:29:55 ب.ظ | لینک نظر |

منظور از گرادینت خطی، یعنی بعد از این که گرادینت رو از منوی چپ انتخاب کردید، از بالای صفحه در بخش تنظیمات، حالت مربوط به linear رو انتخاب کنید.

سعید
سعید Iran
08/11/2013 08:53:40 ب.ظ | لینک نظر |

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

Admin
Admin Iran
08/13/2013 05:17:53 ب.ظ | لینک نظر |

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

mehran18
mehran18 Iran
08/15/2013 11:18:14 ب.ظ | لینک نظر |

سلام.
مرسی ادمین جــــــــــــــون خیلی زیباست.
فقط تو این وبلاگ همه چیز هستش به جز آژاکس.
اگه امکان داره یه بحثی در مورد اسلاید شو با تکلنوژی آژاکس را به بحثاتون اضافه کنید

shobeyr63
shobeyr63 Iran
08/16/2013 12:38:10 ق.ظ | لینک نظر |

عالی بود.

مجتبی
مجتبی Iran
09/02/2013 07:13:54 ب.ظ | لینک نظر |

دمــــــــــت گــــــــــرم

سرویس plus one گوگل

تازه ترین ارسال ها

تبلیغات متنی

طراحي سايت
گروه طراحی سایت وب طراح
طراحی وب سایت
زفره مدیا، طراحی وب سایت
طراحي سايت
مقالات مفيد طراحي سايت,سئو وبرنامه نويسي

تبلیغات

تازه ترین نظرات

Comment RSS

استفاده از مطالب این سایت تنها با درج لینک فعال به مقالۀ مبدا، مجاز است.    Copyright © 2010-2012 Websiteha طراحی حامد میرزایی Powered by BlogEngine.NET 2.5.0.6