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

طراحی وب سایت با فتوشاپ چگونه است

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

یعنی شما با این نرم افزار از قابلیت های آن برای طراحی قالبی که می خواهید به وجود بیاورید استفاده می کنید و در انتها زمانی که قالب نمایشی خود را طراحی کردید باید به وسیله کد نویسی و یا افزونه های مانند Elementor , Beaver Builder , ویژوال کامپوزر و … که با ایزار هایی که در اختیار شما قرار می دهد می توانید قسمتهای مختلف آن قالب را از هم جدا کرده و در جای مناسب در صفحه وب استفاده کنید.

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

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

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

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

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

شما برای اینکه بخواهید یک صفحه وب را طراحی کنید در ابتدا باید اندازه صفحه مورد نظر را در نظر بگیرید من برای اندازه صفحه ای که می خواهیم طراحی کنم این ابعاد را در نظر گر فته ام . عرض صفحه 1500p ,4000p .دقت کنید 1500 پیکسل نشان دهنده عرض صفحه می باشد و 4000 پیکسل نشان دهنده ارتفاع وب سایت می باشد که این اندازه می تواند متغیر باشد زیرا این ابعاد هر قدر محتوای شما بیشتر باشد می تواند بزرگتر شود .

رنگ بندی در طراحی وب سایت

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

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

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

حال شاید شما بپرسید چگونه باید اندازه اسلایدر اصلی را باید پیدا کرد برای این کار به راحتی می توانید طرحی که در فتوشاپ به عنوان طرح وب سایت خود طراحی کرده اید را به صورت Flat در آورده و ابزار Rectangular Marguss toll استفاده کنید که در فتوشاپ به صورت مربه خط چین است که برای برش به صورت مربع استفاده می شود از بالاترین قسمت اسلایدر کلید چپ ماس را نگه دارید و تا پایین تر ین قسمت اسلایدر بکشید که آن قسمت انتخاب شود و در مرحله بعد از کلید ترکیبی Ctrl+N استفاده کنید که یک صفحه جدید به شما نمایش داده شود اندازه دقیق اسلایدر را می توانید در این پنچره مشاهده کنید.

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

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

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

گزینه Rectangular Marguss toll از گزینه Elliptical Marguss toll در tolls استفاده می کنیم که در فتوشاپ به صورت دایره نقطه چین نمایش داده می شود .بعد از اینکه ابعاد دایره مورد نظر را به دست آوردیم زمان آن است که آن 6 اسلاید را باز کرده و به صورت گرد در بیاوریم .

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

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

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

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

مرحله سوم طراحی وب سایت با فتوشاپ طراحی فعالیت ها

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

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

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

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

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

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

مرحله پنچم طراحی وب سایت

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

مرحله ششم مقاله های طراحی وب سایت

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