0

هیچ محصولی در سبد خرید نیست.

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

آموزش مقدماتی تبدیل psd به HTML5

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1099
تاریخ بروزرسانی ۶ دی ۱۳۹۹

آموزش مقدماتی تبدیل psd به HTML5

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

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

آموزش مراحل طراحی سایت حرفه ای و تبدیل PSD به HTML5

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

۵ گام فرآیند تبدیل PSD  به HTML5

گام اول : طراحی فایل PSD

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

۱-درک واضح:

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

۲- لایه های فتوشاپ:

پس از طراحی وایر فریم سایت خود باید در نرم افزار فتوشاپ یک طراحی PSD به صورت لایه بندی حتما داشته باشید. در این مرحله در فتوشاپ حتما باید المان ها و اجزای مختلف طراحی سایت از قبیل هدر سایت، اسلاید شو ها، ساید بار سایت، دسته بندی مطالب، آرشیو مطالب، باکس های اخبار( آموزش،محصولات، و …)‌، فوتر سایت و دیگر امکانات و اجزای سایت را دقیقا مشخص کنید. مشخص کردن دقیق امکانات در این مرحله هم به شما و هم به کدنویسان سایت کمک میکند تا روند طراحی سایت خود را با تمرکز و سرعت بیشتری انجام بدهید.

آموزش تبدیل psd به HTML5

آموزش تبدیل psd به html 5

گام دوم: رنگ ها

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

علاوه بر این تفاوت سلیقه زیادی در این زمینه بین آقایان و خانم ها وجود داره.

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

آموزش تبدیل psd به HTML5

آموزش تبدیل psd به HTML5

گام سوم: HTML5

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

با استفاده از HTML5 شما احتیاج ندارید که از عکس ها برای زیبایی سایتتون استفاده کنید. برای مثال شما بهتره از استفاده ی عکس برای ایجاد Action Button ها خودداری کنید و به جای اون از کد های HTML5 و CSS3 برای اینکار استفاده کنین.

در نهایت استفاده از HTML5  و CSS3 سرعت بالا آمدن سایتتون رو نسبت به استفاده از عکس های با رزولوشن بالا بیشتر خواهد کرد.

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

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

آموزش تبدیل psd به HTML5

آموزش تبدیل psd به HTML5

گام چهارم: CSS3

HTML5 همچنین باعث بوجود آمدن CSS3 شد که کمک شایان توجهی در طراحی مجدد سایت با استفاده از کد های اندک میکند.

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

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

علاوه بر این امکانات gradient،text-shadow،۳۶۰ degree transition و … ایجاد شده است.

آموزش تبدیل psd به HTML5

آموزش تبدیل psd به HTML5

گام پنجم: media queries

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

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

آموزش تبدیل psd به HTML5

آموزش تبدیل psd به HTML5

کلام آخر اینکه:

اگر شما این ۵ گام حیاتی رو فرابگیرید میتونید پروژه خودتون رو به خوبی پیش ببرید و ما مطمئن هستیم که با اجرای خوب این گام ها یک فایل PSD رو به صفحات HTML5 و CSS3 تبدیل و  یک وبسایت خارق العاده که توجه همگان رو به خود جلب میکند میسازید.

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

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

0/5 (0 Reviews)
مطالب مرتبط
تفاوت توسعه دهنده وب و طراح وب چیست ؟
مطالعه :

در این مقاله از تیم وب یار قصد داریم به بررسی تفاوت طراح وب و توسعه دهنده وب بپردازیم. پس در ادامه با ما همراه باشید. طراح وب کیست ؟ طراح وب (Web Designer ) کسی است که چشم انداز کلی سایت را طراحی کرده و برای یک وب سایت برنامه ریزی می کند. طراحی وب کمتر به استفاده از کد برای جان بخشیدن به وب سایت مربوط می شود و بیشتر به تعیین چیدمان سایت ، پالت رنگ ، انتخاب قلم و مضامین بصری می پردازد که می تواند با کدنویسی توسط یک توسعه دهنده وب زنده شود. طراحان وب در درجه اول مسئولیت آگاهی از نحوه کار کد را ندارند . اما اطمینان حاصل می کنند که برای بازدید کنندگان ، وب سایت زیبا و کاربر پسند است. آنها از نرم افزارهای طراحی گرافیک از جمله محصولاتی مانند Adobe Photoshop ، Illustrator ، Inkscape  و … استفاده خواهند کرد. یک طراح وب معمولا باید مسلط به مباحث UX ( تجربه کاربری ) و UI (رابط کاربری ) باشد. در واقع یک طراح وب باعث می شود وب سایت شما خوب به نظر برسد. آنها همچنین از کدهایی مانند HTML و CSS برای ایجاد طرح های خود استفاده می کنند.   توسعه دهنده وب کیست ؟ توسعه دهندگان وب (Web Developer ) برنامه نویسانی هستند که طرح های ارائه […]

Ajax
مطالعه :

تا قبل از تکنولوژی ایجکس برای تغییر بخشی از صفحه نیاز به بارگذاری کل صفحه وب بود. اما بعد از ایجکس (Ajax) تبادل اطلاعات با سرور به حدی پیشرفت کرد که برای تغییر  قسمتهایی از صفحه وب دیگر نیازی به بارگذاری مجدد کل صفحه نبود. همراه ما باشید تا ساز و کار این تکنولوژی محبوب و کارآمد را با شما در میان بگذاریم.   ایجکس چیست؟ Ajax مخفف Asynchronous Javascript And Xml روشی است که با ترکیب جاوااسکریپت و Xml به سرور درخواستی برای بارگذاری بخشی از صفحه را می دهد. Google suggestion یکی از بهترین مثال ها برای تفهیم Ajax  است. هنگامی که شما درگوگل  عبارتی را تایپ می کنید گوگل در عرض چند میلی ثانیه به شما ادامه عبارت را پیشنهاد می‌کند. این سیستم از ajax پیشتیبانی می‌کند. در صورت عدم وجود ایجکس گوگل برای هر پیشنهاد مجبور به بارگذاری کل صفحه می شد!   سازوکار Ajax چگونه است؟ نحوه کارajax به این صورت است که با ارسال داده ها به سرور و به کمک جاوااسکریپت شی xmlHttpRequest را می سازد. ویژگی این شی این است که به صورت مستقیم می‌تواند صفحات و یا وب سرویس ها را از سمت کاربر دریافت و به سمت سرور ارسال کند. به این صورت که درخواست‌ها از مرورگر می گیرد و در سمت سرور پردازش و دوباره به مرورگر باز می‌گرداند. […]

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

با آموزش کسب درآمد رایگان از بیت کوین و دیگر ارز های دیجیتال در خدمت شما مخاطب خوب سایت وب یار هستیم. ارز دیجیتال: از آن جا که سال 2021 را بسیاری از اقتصاد دان ها سال ارز دیجیتال نامیدند،تصمیم بر آن داریم تا شما را با این نوع از ارز ها آشنا کنیم. هدف از این مقاله افزایش سواد جامعه و جلوگیری از فریب مردم می باشد.     تاریخچه: شاید شما بر این باور باشید که اولین ارز دیجیتال بیت کوین می باشد. ولی سخت در اشتباهید. اولین ارز دیجیتال یک ارز به نام E-gold می باشد. معنای این اسم طلای دیجیتالی می باشد.این ارز اولین بار در سال 1996 توسط شخصی به نام داگلاس جکسون ساخته و ارائه شد.اما به یک سری دلایل که در چارچوب این مقاله نمی گنجد در سال 2006 به کار خود پایان داد. بیت کوین: درست 2 سال پس از پایان فعالیت E-gold شخصی با نام مستعار ساتوشی ناکاموتو یک ارز غیر متمرکز را با نام بیت کوین معرفی کرد. اما این ارز هیچ شباهتی به E-gold نداشت. چون تحت یک تکنولوژی غیر متمرکز به نام بلاک چین ساخته شده بود. در سال 2009 اولین بیتکوین ها با قیمت 0.03$ استخراج و خریداری شدند.     افزایش قیمت بیت کوین: در سال 2010 اولین مبادلات با بیتکوین انجام شد. پس از آن […]

سئو محلی چیست ؟
مطالعه :

سئو محلی چیست ؟     سئو محلی (local SEO) یک استراتژی بهینه سازی موتور جستجو (SEO) است که به دیده شدن تجارت شما در نتایج جستجوی محلی در گوگل کمک می کند. هر مشاغلی که دارای موقعیت فیزیکی یا منطقه جغرافیایی باشد می تواند از سئو محلی بهره مند شود. local SEO چگونه عمل می کند؟ در روزهای ابتدایی اینترنت ، تعداد نسبتاً کمی وب سایت وجود داشت ، بنابراین پیمایش در وب آسان بود. به محض اینکه اینترنت شروع به گسترش کرد ، موتورهای جستجو ایجاد شدند تا به کاربران اجازه دهند سایت های مورد نظر خود را با سهولت بیشتری پیدا کنند. پس از تجزیه و تحلیل رفتار کاربران در طی تریلیون جستجو ، گوگل دریافت که افرادی که به دنبال انواع خاصی از مشاغل هستند به نتایج نزدیک خود نیاز دارند. به همین دلیل الگوریتم جستجوی محلی گوگل دارای یک فاکتور مجاورت است . در واقع گوگل هنگام جستجوی کلمه کلیدی محلی موقعیت مکانی شما را در نظر می گیرد. این اتفاق می افتد حتی اگر کاربر نام شهر یا عبارت “نزدیک من” را در جستجوی خود وارد نکند. به عنوان مثال اگر در محل کار خود هستید و می خواهید برای ناهار یک پیتزا تحویل بگیرید ، لیستی از مکان های نزدیک دفتر شما را در صفحه نتایج نمایش می دهد. اما اگر همان جستجو را […]

درگاه پرداخت تلگرام و اینستاگرام
مطالعه :

با توجه به بازار داغ خرید و فروش در اینستاگرام و تلگرام و محبوبیت روزافزون این دو سوشیال مدیا برآن شدیم که راهی آسان و تنها با فشردن چند کلیک، برای دریافت درگاه پرداخت تلگرام و اینستاگرام را خدمت شما عزیزان ارائه دهیم. درگاه پرداختی آنلاین بدون نیاز به دریافت اینماد.   آنچه خواهیم خواند اینماد چیست؟ مدارک و شرایط لازم برای دریافت اینماد درگاه پرداخت آنلاین زرین پال درگاه پرداخت  برای کسب و کارهای اینستاگرامی و تلگرامی اینماد چیست؟ اینماد یا همان نماد اعتماد الکترونیکی(E-Namad) نمادی است که به وب سایت ها و کسب و کارهای اینترنتی اعتبار و رسمیت می بخشد. این نماد توسط مرکز توسعه تجارت الکترونیک به سایت هایی که در آن ها تراکنش مالی صورت می گیرد داده می شود.   مدارک و شرایط لازم برای دریافت اینماد شما به عنوان یک شخص حقیقی با ارائه ی مدارکی نظیر: مجوز کسب و کار تعهد شخص حقیقی شناسنامه، کارت ملی و مدرک نظام وظیفه و پرداخت هزینه می توانید موفق به دریافت دو ساله ی این نماد شوید. علاوه بر مدارک گفته شده هر سایت برای دریافت اینماد موظف به رعایت قوانین و الزاماتی است. الزاماتی نظیر: تایید مالکیت دامنه پشتیبانی از زبان فارسی عدم استفاده از پاپ آپ فروشگاهی بودن سایت درج قیمت روی هر محصول نمایش لینک ثبت شکایت در هر قسمت سایت درج […]

اینستا والت چیست؟
مطالعه :

اینستا والت چیست؟ اینستا والت یک کیف پول ارز دیجیتال می باشد که در 29 آپریل 2011 راه اندازی شد. این کیف پول ها به منظور نگه داری ارز های دیجیتال و فیات استفاده می شد. ارز هایی نظیر: بیت کوین اتریوم لایت کوین تتر کاردانو و موارد دیگر نظیر این ارز ها را میشد در آن نگه داری کرد. این کیف پول از نوع دیجیتالی می باشد. گفته می شود که 3 ماه پس از رو نمایی از این کیف پول، بسته شد. کلاهبرداری با کیف پول اینستا ولت: در چند سال گذشته برخی از این افراد با ایجاد وب سایتی مشابه این وب سایت ایجاد کردند. سعی کردند به این وسیله پول شویی کنند. نحوه فعالیت این وب سایت ها: این افراد به بهانه این که در خارج از کشور هستند و میخواهند چیزی را خریداری کنند یا این که برای کسی پولی بفرستند، با استفاده از این کیف پول از شما کلاه برادری می کنند. یا این که از طریق شما یک فرایند پول شویی را انجام می دهند. چگونه شما در دام این وبسایت ها خواهید افتاد؟ افرادی با شماره های خارج از کشور که اغلب اروپا و کانادا هستند با شما تماس خواهند گرفت. از شما درخواست می کنند این کیف پول را نصب کنید. تا پولی به حساب شما بریزد و یک چیز در […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *