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

در این ارسال نحوه طراحی یک وب سایت در فتوشاپ را همراه با کلیه جزییات آموزش خواهم داد. این وب سایت به عنوان نمونه برای یک موسسه خدمات اتومبیل طراحی خواهد شد اما با تغییر محتوا و تصاویر آن به سادگی برای هر موضوعی قابل استفاده است. در طراحی این وب سایت بسیاری از بخش های مورد استفاده و رایج در وب سایت ها مانند لوگو، نوار جستجو، نوار منو، گالری تصاویر، پنل ورود، بلاگ، خدمات، توضیحات و سرآیند و بخش پایینی سایت در نظر گرفته شده است. به سبب وجود آیتم های متنوع و کاربردی در این آمورش می توانید دیگر پروژه های طراحی وب سایت خود را با دست باز و خلاقیت بیشتری ارائه کنید. مثل همیشه سعی شده مطلب با زبان ساده بیان شود. همچنین فایل کامل پروژه با فرمت 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 را انتخاب نمایید و مقدار زیر را اعمال نمایید:

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

نظرات (97) -

  • محمد

    06/21/1390 11:01:47 ب.ظ | پاسخ به این نظر

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

    • Admin

      06/22/1390 04:41:15 ق.ظ | پاسخ به این نظر

      درود

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

      سپاس

    • حمید

      10/01/1390 06:29:26 ب.ظ | پاسخ به این نظر

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

  • محمد

    06/22/1390 06:17:59 ق.ظ | پاسخ به این نظر

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

    • Admin

      06/22/1390 07:00:04 ق.ظ | پاسخ به این نظر

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

  • محمد

    07/02/1390 06:27:45 ق.ظ | پاسخ به این نظر

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

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

  • ندا

    08/12/1390 03:52:36 ب.ظ | پاسخ به این نظر

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

  • حامد میرزایی

    08/23/1390 10:52:02 ق.ظ | پاسخ به این نظر

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

  • محسن

    08/30/1390 01:38:40 ب.ظ | پاسخ به این نظر

    سلام.

    عالی بود.

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

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

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

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

  • Admin

    08/30/1390 01:56:07 ب.ظ | پاسخ به این نظر

    سلام

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

  • ندا

    09/17/1390 10:24:54 ب.ظ | پاسخ به این نظر

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

    • وحید

      10/12/1390 09:14:21 ب.ظ | پاسخ به این نظر

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

  • ali

    10/05/1390 10:36:06 ب.ظ | پاسخ به این نظر

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

  • navid

    10/20/1390 07:14:02 ب.ظ | پاسخ به این نظر

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

    • Admin

      11/10/1390 11:15:41 ق.ظ | پاسخ به این نظر

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

  • ziba

    10/24/1390 01:39:20 ب.ظ | پاسخ به این نظر

    ali bood

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

    • Admin

      11/10/1390 11:16:58 ق.ظ | پاسخ به این نظر

      سلام

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

  • farzad

    10/28/1390 04:08:02 ب.ظ | پاسخ به این نظر

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

    • Admin

      10/30/1390 10:53:50 ب.ظ | پاسخ به این نظر

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

  • نگار

    11/07/1390 10:15:02 ب.ظ | پاسخ به این نظر

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

    • Admin

      11/10/1390 11:21:08 ق.ظ | پاسخ به این نظر

      سلام نگار جان

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

  • فرشید

    11/10/1390 01:01:05 ق.ظ | پاسخ به این نظر

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

    • Admin

      11/10/1390 11:40:02 ق.ظ | پاسخ به این نظر

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

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

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

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

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

  • آناهیل

    11/21/1390 07:23:36 ب.ظ | پاسخ به این نظر

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

  • Admin

    11/21/1390 08:12:17 ب.ظ | پاسخ به این نظر

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

  • غریبه

    11/24/1390 12:47:39 ب.ظ | پاسخ به این نظر

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

  • hamed

    11/26/1390 08:00:47 ب.ظ | پاسخ به این نظر

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

    • Admin

      11/27/1390 11:31:31 ب.ظ | پاسخ به این نظر

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

  • علی

    12/19/1390 01:52:48 ق.ظ | پاسخ به این نظر

    آقا فایل PDF حذف شده. جان بپت دوباره آپ کن خیلی بهش نیاز دارم.

  • معصومه

    01/21/1391 01:29:33 ب.ظ | پاسخ به این نظر

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

  • bikas

    01/23/1391 06:27:36 ب.ظ | پاسخ به این نظر

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

  • foad

    02/13/1391 11:46:32 ب.ظ | پاسخ به این نظر

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


    ممنون .

  • شاهین

    02/26/1391 11:04:52 ق.ظ | پاسخ به این نظر

    سلام

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


    خدا حافظتون

  • حسام

    02/31/1391 10:40:01 ق.ظ | پاسخ به این نظر

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

  • kay arash

    03/27/1391 04:23:47 ب.ظ | پاسخ به این نظر

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

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

  • یاسر

    03/28/1391 01:28:45 ب.ظ | پاسخ به این نظر

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

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

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

  • فرید

    04/25/1391 12:22:48 ب.ظ | پاسخ به این نظر

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

  • saba

    05/15/1391 12:15:51 ب.ظ | پاسخ به این نظر

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


  • الهه

    06/10/1391 11:18:18 ب.ظ | پاسخ به این نظر

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

  • marzie

    07/03/1391 05:52:19 ب.ظ | پاسخ به این نظر

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

  • محمود

    08/08/1391 09:22:23 ب.ظ | پاسخ به این نظر

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

  • سعید

    08/24/1391 01:06:44 ب.ظ | پاسخ به این نظر

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

  • اندیشه

    10/17/1391 10:23:15 ق.ظ | پاسخ به این نظر

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

  • الناز

    12/08/1391 01:09:16 ب.ظ | پاسخ به این نظر

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

  • aslam

    12/09/1391 01:39:49 ب.ظ | پاسخ به این نظر

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

  • maryam

    12/20/1391 04:00:53 ب.ظ | پاسخ به این نظر

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

  • mk

    01/07/1392 12:39:11 ب.ظ | پاسخ به این نظر

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

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

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



  • محمدحسین

    03/30/1392 01:43:25 ب.ظ | پاسخ به این نظر

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

  • الینا

    04/05/1392 11:07:12 ق.ظ | پاسخ به این نظر

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

    • Admin

      05/15/1392 06:35:11 ب.ظ | پاسخ به این نظر

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

  • saied

    04/09/1392 03:44:28 ب.ظ | پاسخ به این نظر

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

    • Admin

      05/15/1392 06:32:43 ب.ظ | پاسخ به این نظر

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

  • E.Salehi

    04/13/1392 08:16:53 ب.ظ | پاسخ به این نظر

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

  • هنگامه

    05/05/1392 01:20:26 ب.ظ | پاسخ به این نظر

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

  • جواد

    05/15/1392 01:07:36 ب.ظ | پاسخ به این نظر

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

    • Admin

      05/15/1392 06:29:55 ب.ظ | پاسخ به این نظر

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

  • سعید

    05/20/1392 08:53:40 ب.ظ | پاسخ به این نظر

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

    • Admin

      05/22/1392 05:17:53 ب.ظ | پاسخ به این نظر

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

  • mehran18

    05/24/1392 11:18:14 ب.ظ | پاسخ به این نظر

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

  • علی

    05/27/1393 03:28:46 ب.ظ | پاسخ به این نظر

    عزیزدل
    طریقه لینک دادن رو من بلد نیستم :-(
    مثلا home یه کلید هستش چجوری اینو به یه جای دیگه وصلش کنیم ؟
    من میخوام طراحی سایت با فتوشاپ رو حرفه ای بشم اگه راهنمایی در این زمینه دارید خوشحال میشم بگید !!!
    ممنون که انقد خوبید !!!

  • مهدی

    06/02/1393 08:50:38 ق.ظ | پاسخ به این نظر

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

  • فرید

    06/10/1393 05:55:44 ب.ظ | پاسخ به این نظر

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

  • leila

    06/11/1393 07:27:11 ب.ظ | پاسخ به این نظر

    با سلام خدمت مدیریت سایت .
    من آموزش های شما را خواندم وبه مشکلی بر خوردم اونم این بود که در قسمت رسم مستطیل من نتونستم مستطیل مورد نظر را درست کنم . یک مستطیل توسط ابزار رسم مستطیل (Rectangle Tool) به عرض 100% و ارتفاع 200px رسم نمایید  
    عرض و ارتفاع و از کدوم قسمت تعیین کنم.؟؟؟؟

    با تشکر از سایت خوبتان.

    • حامد میرزایی

      06/12/1393 01:50:14 ق.ظ | پاسخ به این نظر

      سلام
      بعد از رسم مستطیل، دکمه ctrl+t رو بزنیدو بعد در بالای صفحه در فیلدهای نشون داده شده برای عرض و ارتفاع، عدد مورد نظرتون رو وارد کنید

  • SaeedCMK

    06/17/1393 08:34:20 ب.ظ | پاسخ به این نظر

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

  • ALI

    06/23/1393 04:35:23 ب.ظ | پاسخ به این نظر

    سلام  آقا من اون قسمتو متوجه نشدم  :
    در قسمت سوم که باید کلید ctrlرو فشار بدیم و روی تصویر کوچک (کجاست ؟) کلیک کینم
    و منوی select در کجا قرار دارد ؟
    خواهشن کمکم کیند من زیاد با فتوشاپ آشنا نیستم . ممنون

  • ALI

    06/24/1393 09:39:02 ق.ظ | پاسخ به این نظر

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

  • محسن

    08/18/1393 08:24:46 ب.ظ | پاسخ به این نظر

    با سلام
    من با فتوشاپ وبسایت رو طراحی کردم.حالا جای اون نوشته هایی که گذاشتم مثل:HOME و ... چجوری باید لینک بدم؟؟؟
    سوال دوم اینکه چه خروجی بگیریم از فتوشاپ؟؟؟

  • نسترن

    09/03/1393 08:41:49 ب.ظ | پاسخ به این نظر

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

  • amir

    09/07/1393 02:52:32 ب.ظ | پاسخ به این نظر

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

  • سِد آریا

    09/16/1393 01:35:09 ب.ظ | پاسخ به این نظر

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

  • امیر حسین

    09/21/1393 10:28:06 ق.ظ | پاسخ به این نظر

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

  • zahra

    09/21/1393 09:56:49 ب.ظ | پاسخ به این نظر

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


    واقعا ازتون ممنونم ایول دارین بخدا

  • ازاده فرزین

    09/22/1393 05:27:07 ب.ظ | پاسخ به این نظر

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

  • محمد

    09/23/1393 04:45:18 ق.ظ | پاسخ به این نظر

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

  • amin

    09/23/1393 04:53:12 ب.ظ | پاسخ به این نظر

    درود بر شما آقای مهندس admin.من راجع به یه موضوعی خیلی تحقیق کردم و دوست دارم که به بقیه ی مردم هم از اونا استفاده کنن و نظر بدن و... این شد که به سرم زد که یه سایت طراحی کنم.اما دو هفته ای هست که روزی 6-7 ساعت توی اینترنت میچرخم ام هیچ مطلب کاملی که از صفر تا صد کار ساخت سایت رو یاد بده پیدا نکردم.بخدا مغزم داره میترکه.اصلا من باید از کجا شروع کنم؟چه کلاسی باید برم؟درضمن من هیچ اطلاعی از کار برنامه نویسی و htmlوcssو... ندارم.تو رو خدا اگه میشه یه مقاله ی کامل کامل در حد یک کتاب در رابطه با ساختن سایت از پایه ی پایه بگذارید و دانلودش رو هم پولی کنید,هر قیمتی که دوست دارید. بخدا اینجوری یه جماعتی رو راحت کردین و شک نکنین جاتون تو بهشته

  • aslam

    10/24/1393 09:59:44 ق.ظ | پاسخ به این نظر

    سلام مدیر
    اولا تشکر و سپاس فراوان
    ثانیا آموزشت و کارت 20
    ثالثا پس این تبدیلش به html و css ان شاالله کی آماده میشه فکر کنم حدودا 2 سال یا بیشتر میشه که این پروژه عملی بشه ولی هنوز نشده من این فایل رو همون اوایل دانلود کردم و منتظر بقیه هم هستم  
    رابعا برات آرزوی موفقیت روزافزون از خدای یکتا دارم

  • ZOHREH

    11/20/1393 01:11:08 ب.ظ | پاسخ به این نظر

    واقعا ممنونم از سایت خیلی خیلی خوبتون خیلی مطالب خوبی توش گذاشتید

  • Administrator

    11/20/1393 04:37:58 ب.ظ | پاسخ به این نظر

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

  • فهیمه

    12/05/1393 10:36:44 ق.ظ | پاسخ به این نظر

    سلام ندا جان من هم با شما موافقم . فقط انتقال قالب رو به سایت بلد نیستم.
    نصیریان

  • رضا

    01/25/1394 10:37:52 ب.ظ | پاسخ به این نظر

    با سلام من تصمیم دارم قالب سایتی را به HTML تبدیل کنم آیا شما این امکان را دارید؟ یا کسی را سراغ دارید این کار را برایم انچام دهد؟ البته هزینش رو می پردازم.
    با تشکر

Loading