GitHub Quick Start Tutorials for designers

In the Internet industry presumably have heard about the name of GitHub, in addition to the largest open-source project hosting platform, many enterprises are using GITHUB to co-development work, of course, we are one of the color process. I initially decided to learn Git is also because in the team internal design is initially developed, there will be some details need to adjust, and in order to adjust a few pixels of the front-end engineer to do, in fact, it is very influential overall efficiency, so hope to learn from GitHub when necessary to directly participate in the development, Can play their own bit of CSS technology to more directly and quickly solve the problem.

But during the time unexpectedly found that there is no one on the web for the designer of the Git tutorial, typically, almost no tutorial on the official GitHub application, but all around the command to do the tutorial, is a DOS-like command interface, which for designers and product managers and other non-technical background practitioners are somewhat difficult to get started, So I'm going to combine my personal experience and write a github tutorial that uses Web pages and clients (just for the MAC client, for example), hoping it will help you get familiar with and start using GitHub at the fastest speed.

Why get to Know GitHub

Before you start, you have to tell me why GitHub is worth learning. In addition to the example of the opening, you can bring out some of the CSS or development skills you know and reduce the cost of communication in your team. This is essentially the question of whether the designer should learn to develop or learn to what extent. But I always thought there was nothing to discuss, just a different choice and pursuit for everyone. Just like some people want to become furniture designers, some people really want to hand-polished their own heart of the most ideal chair; some people want to be architects, and some people just want to build a perfect hut for their families at the foot of the hill. Similarly, if you really love this ever-changing industry, maybe one day to create something of their own, I think you will not hesitate to start learning.

　
What is Github

As a rule, let's start with a brief introduction of what Git is (the students with basic knowledge can skip directly). Let's get rid of those professional terms and describe what Git is all about in the context of what designers are often working with:

You out of a version of the plan A, after the discussion, you change to B, the results are discussed again, we think it is better to use a, then found that a did not save, but also to change back! You don't have to worry about GitHub, it records every version you commit and puts it in a repository (Repository), and every commit change is a commit, and you can fall back to any version at any time.
In addition, you are likely to encounter scenario-based scenarios, on the basis of programme A, a plan B has been changed, and a solution C, may also be derived from B1, B2 and C1, C2, in GitHub Branch (Branches) can record the differentiation process of this scheme.
Later you think the B1 and C2 scenarios have desirable places, blending them can output final manuscript, Git of course also support this branch merge (merged).

When you personally use Git, the basic concepts involved are just a few, not very simple. Let's take a look at the multiplayer synergy, which is where Git is really powerful, and of course it's not complicated.

In a slightly larger team, may require several designers to work together to complete a program, how to unify the progress, one is the daily copy of the files together, it takes a lot of time to synchronize files, it is obviously inconvenient. The other is that everyone has a copy of the computer, and when needed to synchronize with the cloud server, Git is the use of such a so-called distributed system. The benefits are more secure and more convenient.
Then the problem is coming, if we all change the same thing, what if the conflict? Don't worry, Git will help you compare and tell you where there is a conflict, and you can make a choice about where the conflict is. In addition, the front is not talk about can be derived from the branch (Branches), when everyone to promote the program, respectively, put the content in different branches, will not interfere with each other.
Open source projects are visible to anyone, you can Fork a project, which is equivalent to a new branch from the original project under your account, you can change on this basis, if you have the results you wish to submit to the original author, you can send a merge application to the original library (pull request), The original author can see the notification and decide whether to merge. In this way, you can make an open source project even better.

Finally, we have to be clear about the concept, what is the difference between git and GitHub, citing the explanation of Fluyy "Git is a version control tool, and GitHub is a project hosting platform that uses Git as a version control. "This is a bit like the relationship between Wordpress and WordPress.com, the former is a free blogging system that can be used by anyone, and the latter is a platform on which you can register to write blogs directly using WordPress.

Speaking of which, I think you've got a basic understanding of what's going on with GitHub, let's just roll up our sleeves and see how GitHub is using it in a simple case.

Case study-Make it all clear!

We Fork a project, make their own changes and submit to the original author's task as a basic case, following my step by bit, the net quick students can be done in a few minutes.

First step: Sign up for a GitHub account and log in

This process will not be said, you can download the official GitHub App, and log in.

Step Two: Fork Warehouse

　　

Click here to open I use a vest for this tutorial to create a library designers-learn-git, you can see the creator name (my vest) written in/front: Tower-kevinli. Then click the Fork button in the top right corner.

When you're done you'll find that you jump to a new page and Tower-kevinli becomes your GitHub account name (Cnkevinlee is my other vest ...). This means that your account has "copied" a copy of the Designer-learn-git, and then you can make changes.

Step three: Modify the file

Can see designers-learn-git this warehouse only two files "readme.md" (Project description) and "roster. txt", here we just try to modify the latter (the same reason and modify a lot of files of the warehouse is the same). Can be directly online modification, you can also clone to the local and then modify, for more complex projects is definitely to take the latter, but here we can first look at the page directly modify how to operate.

Online modification: Directly on the page "roster. txt" name, enter the following details page, and then click "Edit".

The task here is to write your ID and Tiitle on the roster, and the intention is to have an interaction with the students who are learning this tutorial, and see how you can get to the first few.

When the edit page is finished, scroll to the bottom of the page and click the green "Commit changes" button to confirm the submission.

Local modification: Another way is to clone the project to the local and then modify, open the client (here is the latest version of the Mac), click on the upper right corner of the "+" sign, switch to "clone", find "Designers-learn-git" and then click on the bottom right "clone Repository button

Then find the cloned folder locally, open "roster. txt", Edit and save. Then switch to the GitHub app window and you'll see that it has detected and listed your changes on the "Changes" page, then click the Commit & Sync button to commit the changes and sync to GitHub. Note that the commit and sync is two actions, you need to activate the green button first, these two actions will be executed at the same time, otherwise you will need to click on the entire interface in the upper right corner of the sync (for multiple changes after the unified submission).

Fourth step: Apply for merger

After confirming that the warehouse you have already forked has been successfully modified, you can submit a merge request to merge your version into the original project, which is the designers-learn-git I created, in the following steps:

Open your Fork's designers-learn-git page on the webpage and click on this striking green button

Then click on the "Create Pull Request" button to submit the application, I will be notified when you are done, and merge your additions into the original library.

Note that the red Spot shows the two branches to be merged, because there is no new branch, the default display of the two libraries are the only master Main branch, you can try to create a new branch, and select other branches to apply for the merge, experience the branch of GitHub, this article as an introductory tutorial here to not repeat the first, Students who have problems can contact me.

Picture contrast function, designer's true love!

Finish the previous case, you will find GitHub can directly compare files between the changes, but also only for the program, text files valid, but we designers are to eat on the map! Okay, don't worry. GitHub has been trying to improve the experience of the designers, and has achieved a good picture comparison function, of course, directly upload the possible huge PSD source file is not very realistic, but we can compare the exported version, click here to see the Demo.

GitHub's image comparison tool offers three different ways to help you find the difference, so let's take a look:

2-up: is directly and emitted in the comparison, will show the size:

Swipe: is the two charts stacked together, by dragging, change the above graph display size, the user stared at the drag line near the change can quickly find the difference, when dragged to the cat's eye near it is easy to see a wearing glasses.

Onion Skin: It is also the two charts stacked in a piece, below the graph has a drag bar, control the transparency of the above picture, so that when the drag to change the transparency, you can feel the difference between the place.

GitHub uses expansion-it can do much more than that!

Version management, collaborative development and design, this is just the most basic use of GitHub, in fact, using the Git system, can achieve a lot of other things.

Collaborate with GitHub on translation

Apple's release of Swift language, known as easier to get started, so many designers are eager. At the same time the official release (translated into Chinese) to more than 300 pages of the Official Handbook, and a self-organized team in China, more than 30 people with 9 days to complete the translation and proofreading work, they each have their own things, work, online, entrepreneurship, but with the help of GitHub They finished the feat in such a short period of time in their spare time. Their slogan is "This time, let China and the world in sync"

Click here to see their projects and translation results.

Write a book with GitHub

Speaking of the previous example, you have to mention Gitbook, a tool that combines GitHub and Markdown to create beautiful online readings. You can work on your own or with anyone, write an online book, and sell it, when a writer is no longer just a dream.

Project Management with GitHub

GitHub was originally developed for the management of development, and of course has the potential to project management, especially in the development of closely linked projects, its advantages are obvious. This article describes how to use GitHub with other tools for project management: using GitHub for Project Management, working with GitHub for teamwork. Of course, GitHub is very much a development-oriented management, general project management or suitable for the use of our home Tower and other products:)

Build blogs and personal sites with GitHub

An online personal page, an independent blog, is almost a must for every designer. In the past, it was a time-consuming and good money to rent space, install website programs, and take personal websites. GitHub itself offers a free hosting service and a thoughtful Pages feature that binds to your own domain name and makes it all happen. Free, efficient, unlimited traffic, make a personal page more than enough, such as the first two days happened to see this example: Jianglai.me. But many engineers have already built their own blogs on GitHub, and designers are quick to follow.

Some tutorials are recommended:

Creating a personal site via GitHub Pages (detailed steps)
"How to build an independent blog--Concise Github Pages and Hexo Tutorial"
"Building a free, unlimited flow of Blog--github Pages and Getting Started with Jekyll"
More advanced Tutorials Recommended

Since this article is just an introductory tutorial, no more details are detailed, and if you're interested in git, look at the following, which can help you become an expert, or at least a designer git expert:)

Concise Guide to the git-
"Pro Git"
"Git Magic"
An online interactive tutorial on learning Git
Questions about GitHub learning materials
Of course this may not be the best GitHub starter tutorial, but it must be the best for designers, and hopefully it will help you get started quickly to learn about the program the apes are hanging on their mouths all day. If there is any inappropriate in the text, please point out that there is no clear place also welcome to contact me @ Choi Cheng-kevin discussion.

Of course, GitHub is just a small branch of the technology world, the root of the problem, or the designers of the technical study, if you are not satisfied with the drawing tools, want to do Geek designers, welcome Dabigatran 302258924 Exchange.

GitHub Quick Start Tutorials for designers