GitHub Quick Start tutorial for designers

Kevin (Tower Designer): In the Internet industry must have heard more or less of the name of GitHub, in addition to the largest open source project hosting platform, many enterprises are also using GitHub to work together, of course, we are one of the color process. I originally decided to learn git is also because in the team's internal design initially developed, there will be some details need to be adjusted, and in order to adjust the problem of several pixels to the front end of the engineer, in fact, is very affecting the overall efficiency, so hope that through learning GitHub in the necessary time to directly participate in Can play a bit of their own CSS technology to more directly and quickly solve the problem.

But there was no git tutorial on the web for designers, typically, there is hardly a tutorial on the official application of GitHub, which is a tutorial on the command character, which is a DOS-like command interface, which is somewhat difficult for the designers and product managers and other non-tech background practitioners. So the author intends to combine personal experience, write a book to use the Web page and client-oriented GitHub tutorial (for the time being only to Mac version of the client as an example), I hope it can help you become familiar with the fastest speed and gradually began to use GitHub.

　　Why to understand GitHub

Before you start, it's important to say why GitHub is worth the designer's learning. In addition to the first example, you can learn a little bit of CSS or development skills to play, reduce the cost of communication team cooperation. This is essentially the question of whether the designer should learn to develop or learn to what extent. But I always think that there is nothing to explore, but everyone's different choice and pursuit. Just like some people want to become furniture designers, some people really want to personally polish out their own heart the most ideal of that chair; some people want to be architects, some want to build a perfect cabin for their family at the foot of the mountain. Similarly, if you really love this ever-changing industry, maybe one day to create something for themselves, I think you will not hesitate to start learning.

　What is GitHub

By convention, it's still a brief introduction of what Git is (a basic understanding of students can skip directly). Let's get rid of those professional terms and describe what git is in the context of a designer's job:

* You have a version of the plan A, after the discussion, you change to B, the results of the discussion, we think or better use a, then found a did not save, but also to change back! Don't worry about it in GitHub, it will record each version you submit and put it in a warehouse (Repository), And every time you commit a change is a commit, you can fall back to any version at any time.

In addition, you are also likely to experience the derivative of the scenario, on the basis of programme A, a scheme B has been changed, and a programme C, which may also be derived from B1, B2 and C1, and C2, has branches (GitHub) in branches to record the differentiation process of the scheme.

• Later you feel that B1 and C2 schemes have the desirable place to integrate them so that you can output the final draft, and git certainly supports this branch merging (merged).

When you personally use Git, the basic concepts involved are just a few, not very simple. Here's a look at multiplayer synergy, where git is really awesome, and certainly not complicated.

• In a slightly larger team, you may need a few designers to work together to complete a program, how to unify the progress, one is that people each day to copy files together, this needs to often waste time to sync files, obviously very inconvenient. The other is that everyone left a copy of the computer, need to sync with the cloud server, Git is the use of such a so-called distributed system. The benefits are more secure and more convenient.

So the question comes, if everyone changes the same thing, what if the conflict happens? Don't worry, Git will help you contrast and tell you where there is conflict and you can make a choice about where the conflict is. In addition, the front is not mentioned can be derived from the branch (branches), in each of us to promote the program, respectively, the content in different branches, will not interfere with each other.

• Open source project is visible to anyone, you can fork a project, which is equivalent to a new branch in your account from the original project, you can change on this basis, if there is hope to submit the results of the original author, you can send the merged application to the original library (Pull request), The original author can see the notification and decide whether to merge. In this way, you can join forces to make an open source project better.

Finally, we have to be clear about the concept of what is the difference between git and GitHub, citing the fluyy explanation of "Git is a versioning tool, GitHub is a project hosting platform with Git version control." "It's kind of like WordPress and WordPress.com, the former is a free blogging system with any available, and the latter is a platform on which you can register to use WordPress to write blogs directly."

Speaking of which, I think you have a basic understanding of how GitHub is going on, let's just roll up our sleeves and take a simple case to see how GitHub is using it.

Case study: Do it all understand!

We fork a project, make their own changes and submitted to the original author of the task as a basic case, follow me step by step, the net quick students can be finished in a few minutes.

　　First step: Register a GitHub account and log in

This process will not be said, after completion can download GitHub official app, and login.

　　Step Two: Fork Warehouse

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

When you're done, you'll notice that you jump to a new page and Tower-kevinli becomes your GitHub account name (Cnkevinlee is my other vest ...), which means that your account has "duplicated" a designer-learn-git, Then you can make the changes.

　Step three: Modify the file

You can see that Designers-learn-git has only two files in this warehouse, "README.MD" (Project description) and "roster. txt", where we just try to modify the latter (the same is true of the warehouse where many files are modified). can be directly modified online, can also be cloned to the local modification, for more complex projects are sure to take the latter, but here we can first look at the Web page directly modify how to operate.

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

The task here is to write your ID and tiitle on the roster, so that you can have an interaction with the students who are learning this tutorial and see how you can get to the top.

After editing the page, scroll to the bottom of the page and click on 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 to the latest version of the Mac as an example), click on the upper right corner of the "+" number, switch to "clone", find "Designers-learn-git" after the click on the bottom right of "clone Repository button

Then locate the cloned folder locally, open "roster. txt", Edit and save. Then switch to the GitHub application window and you will find that it has detected and listed your changes on the "Changes" page, and then click the Commit & Sync button to submit the changes and sync them to GitHub. Note that submission and synchronization are two actions that need to be activated by the green button below, and that the two actions will be executed at the same time, or you will need to sync at the top right corner of the entire interface after submission (applicable to the case where multiple revisions are made to the consolidated submission).

　　Step Fourth: Apply for a merger

After confirming that the warehouse that has been fork to you has been successfully modified, you can submit the merge application and apply to merge your version into the original project, which is the designers-learn-git I created, as follows:

Open your Fork designers-learn-git page on the page and click on this eye-catching green button.

Click the "Create Pull Request" button, submit the application, I will be notified after completion, and will add your content into the original library.

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

Picture contrast function, designer's true love!

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

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

2-up: is directly and emissions together in contrast, will show size:

Swipe: Is the two figures stacked together, by dragging, change the display size of the above figure, the user stared at the drag line near the change can quickly find the difference, such as the figure, when dragged to the cat near the eye is easy to see a wearing glasses.

Onion Skin: It is also a stack of two pieces, the bottom of the diagram is a drag bar to control the transparency of the above diagram, so that when you drag changes in transparency, you can feel the difference between the place.

GitHub Use expansion: Can do much more than this!

　Collaborative translation with GitHub

Apple's release of the Swift language, which it claims to be easier to get started with, has made many designers itch. At the same time, the official published (translated into Chinese) more than 300 pages of the Official handbook, and a spontaneous organization of the team, more than 30 people in 9 days to complete the translation and proofreading work, they each have their own things, work, online, entrepreneurship, However, with the help of GitHub, they have done this feat in such a short time in their spare time. Their slogan is "This time, let China and the World Sync"

Click here to see their project and translate the results.

　Write a book with GitHub

Speaking of the previous example, we have to mention Gitbook, a combination of GitHub and markdown to produce exquisite online reading tools. You can work on your own or with anyone, write an online book, and be able to sell, when the writer is no longer just a dream.

Project Management with GitHub

GitHub was originally born for the management of development, and of course has the potential of project management, especially with the development of closely related projects, its advantages are obvious. Use GitHub to build blogs, personal websites

An online personal page, a standalone blog, is almost a must for every designer. In the past, to rent their own space, the installation of Web site procedures, a personal site, is a time-consuming and good money. And GitHub itself provides a free hosting service, but also provides the intimate pages of the function, you can bind your own domain name, so that all of the inevitable. Free, efficient, unlimited flow, to do a personal page more than enough, such as the previous two days happened to see this example: Jianglai.me. But many engineers have built their own blogs on GitHub, and designers are quick to follow.